<template>
	<action-bar type="back" isWhite="1" title="实时监控" v-if="!fullScreenFlag"></action-bar>
	<tishi ref="showtishi" isclen="1" bgcolor="#fc474c" title="您确定要退出登录吗？"></tishi>
	<view style="background-color: #1F1F1F;height: 100vh;overflow: hidden;" class="u-f-column u-f">
		<view class="navTop u-f-item u-f-jsb height100   colorfff " v-show="!fullScreenFlag">
		</view>
		<view class="flex flex1" style="overflow: hidden;">
			<view class=" color9F9F9F size32 posire conLeft  u-f-column u-f" :class="{conLeft1:conLeft}"
				v-show="!fullScreenFlag">
				<image mode="widthFix" class="image width60 posiab right0 cursor" :style="{top:hhg/2-40+'px'}"
					src="/static/img/gsuanbi.png" @click="conLeft = !conLeft"></image>
				<view class="tab u-f-item  border-b3e3e3e">
					<view @click="taptab(0)" :class="tindex == 0?'active':''" class="item cursor">
						设备
						<view v-if="tindex==0" class="heng "></view>
					</view>

					<view @click="taptab(1)" :class="tindex == 1?'active':''" class="item cursor" style="margin: 0;">
						收藏
						<view v-if="tindex==1" class="heng "></view>
					</view>
				</view>
				<view class="u-f u-f-column u-f-jsb flex1" style="overflow: hidden;">
					<view v-if="tindex==0" class="flex1 u-f u-f-column" style="overflow: hidden;">
						<view class="leftTop flex-a-i posire mt25">
							<view class="flex-ju-c wh120-60 ra10 bg5c5c5c mr20 cursor"
								:class="{LanSeBeiJing:leftTopIndex==index}" v-for="(item,index) in ['组织搜索','通道搜索']"
								:key="index" @click="leftTopTabClick(index)">
								{{item}}
							</view>
							<view class="input u-f-item">
								<input type="text" v-model="searchName"
									:placeholder="leftTopIndex==0?'输入组织名称进行搜索':'输入通道名称进行搜索'" clearable
									@blur="getDevicesList" @change="getDevicesList">
								<image mode="widthFix" class="icon1" src="/static/img/suosuo.png" v-if="!searchName">
								</image>
								<image mode="widthFix" class="icon1" style="width:20px;"
									src="/static/img/jiankong/106.png" @click="searchName = '',getDevicesList()" v-else>
								</image>
							</view>

						</view>
						<view class="leftList ">
							<view class="sanDian " v-if="dataSource.length">
								<el-dropdown placement="bottom-end">
									<view class="dianBox u-f-justify">
										<view></view>
										<view></view>
										<view></view>
									</view>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="getDevicesList">刷新</el-dropdown-item>
										</el-dropdown-menu>
										<el-dropdown-menu>
											<el-dropdown-item @click="puManChuangKou">铺满窗口</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</view>
							<el-tree style="background: #2c2c2c;color:#fff;" :data="dataSource" node-key="id"
								default-expand-all :expand-on-click-node="false" @node-click="nodeClick"
								v-if="dataSource.length">
								<template #default="{ node, data }">
									<view class="customNode1 u-f-item u-f-jsb"
										v-if="data.online_status==1&&currentKey==data.id">
										<view class="xuanZhong"></view>
										<view class="u-f-item dian" @click="xxFlag = !xxFlag">
											<view class="xiaodian"></view>
											<view class="xiaodian"></view>
											<view class="xiaodian"></view>

											<view class="xuanXiang u-f-justify u-f-column" ref="xuanXiang"
												v-if="xxFlag">
												<view class="item u-f-item " @click="sheBeiJiaRuShouChangJia(data)">
													<view class="itmeIocn">
														<image class="img" src="/static/img/jiankong/35.png"
															mode="widthFix"></image>
													</view>
													<view class="itemName">添加收藏</view>
												</view>
												<view class="item u-f-item " @click="jiaRuTongDao(data) ">
													<view class="itmeIocn">
														<image class="img" src="/static/img/jiankong/36.png"
															mode="widthFix"></image>
													</view>
													<view class="itemName">添加到轮巡</view>
												</view>
											</view>
										</view>
									</view>

									<view class="custom-tree-node flex-ju-b width1000" @mouseenter="mouseEnter(data)"
										@click="ziyuanShuClick(data)">
										<view class="flex-a-i">
											<view v-if="data.online_status==1" class="staDian">
											</view>
											<view v-if="data.online_status==2" class="staDian1">
											</view>
											<image mode="widthFix" v-if="data.online_status==1&&data.camera_type==3"
												class="image width45" src="/static/img/shexaingtou.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==0&&data.camera_type==3"
												class="image width45" src="/static/img/jiankong/66.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==1&&data.camera_type!=3"
												class="image width45" src="/static/img/jiankong/96.png">
											</image>
											<image mode="widthFix" v-if="data.online_status==0&&data.camera_type!=3"
												class="image width45" src="/static/img/jiankong/97.png">
											</image>
											<view class="labelText">{{data.name}} <text
													v-if="data.node_type==0"></text></view>
										</view>
										<view class="u-f-item  posire ">
										</view>
									</view>
								</template>
							</el-tree>

							<view class="u-f-justify u-f-column " style="padding-top: 100px;" v-else>
								<view>
									<image style="width: 200px;" src="/static/img/jiankong/42.png" mode="widthFix">
									</image>
								</view>
								<view>暂未查询到内容</view>
							</view>
						</view>
					</view>
					<view v-if="tindex==1" clas="flex1" style="overflow: hidden;">
						<view class="leftTop flex-a-i posire mt25" style="padding-left: 12px;margin-bottom: 14px;">
							<view class="input u-f-item" style="width:390px;">
								<input type="text" v-model="deviceName" placeholder="输入通道名称进行搜索" clearable
									@blur="shouchangList = [],getFavoritesList()"
									@change="shouchangList = [],getFavoritesList()">
								<image mode="widthFix" class="icon1" src="/static/img/suosuo.png" v-if="!deviceName">
								</image>
								<image mode="widthFix" class="icon1" style="width:20px;"
									src="/static/img/jiankong/106.png" @click="deviceName = '',getFavoritesList()"
									v-else>
								</image>
							</view>
						</view>
						<view class="shouchangHang u-f-item u-f-jsb">
							<view class="u-f-item hangLeft">
								<view class="icon">
									<image src="/static/img/jiankong/51.png" class="img" mode="widthFix"></image>
								</view>
								<view class="text">
									收藏夹
								</view>
							</view>
							<view class="u-f-item">
								<view class="caozuo u-f-item cursor" @click="chuangJianShouChangJia">
									<view class="icon">
										<image src="/static/img/jiankong/52.png" class="img" mode="widthFix"></image>
									</view>
									<view class="text">
										创建
									</view>
								</view>
								<el-popconfirm title="删除后不可恢复，请谨慎操作?" @confirm="shanChuShouCangJia">
									<template #reference>
										<view class="caozuo u-f-item cursor" style="margin: 0 24px;">
											<view class="icon">
												<image src="/static/img/jiankong/53.png" class="img" mode="widthFix">
												</image>
											</view>
											<view class="text">
												删除
											</view>
										</view>
									</template>
								</el-popconfirm>
								<view class="caozuo u-f-item cursor" style="margin-right: 24px;"
									@click="shouchangList = [],getFavoritesList()">
									<view class="icon">
										<image src="/static/img/jiankong/54.png" class="img" mode="widthFix"></image>
									</view>
									<view class="text">
										刷新
									</view>
								</view>
							</view>
						</view>
						<view class="shouchangList">
							<el-tree style="background: #2c2c2c;color:#fff;" :data="shouchangList" node-key="id"
								:expand-on-click-node="false" @node-click="nodeClick" v-if="shouchangList.length"
								:default-expanded-keys="false" default-expand-all>
								<template #default="{ node, data }">
									<view class="customNode1 u-f-item u-f-jsb"
										v-if="data.onlineStatus==1&&currentKey==data.id">
										<view class="xuanZhong"></view>
										<el-dropdown placement="bottom-end">
											<view class="u-f-item dian">
												<view class="xiaodian"></view>
												<view class="xiaodian"></view>
												<view class="xiaodian"></view>
											</view>
											<template #dropdown>
												<el-dropdown-menu>
													<el-dropdown-item @click="shanChuSheBei(data)">删除</el-dropdown-item>
												</el-dropdown-menu>
											</template>
										</el-dropdown>
									</view>
									<view v-if="data.favoritesName">
										<image src="/static/img/jiankong/55.png" style="width: 24px;" mode="widthFix">
										</image>
									</view>
									<view class="labelText" @click="shouChangItemClick(data)">
										<view class="text singleLine" v-if="data.id!=shouChangId">
											{{data.favoritesName}}<text v-if="zhuZhiId==data.id"
												style="white-space:nowrap;color:rgb(185 185 185)">（已选中分组）</text>
										</view>
										<view class="input u-f-item" v-else>
											<input type="text" v-model="data.favoritesName" focus
												@blur="inputBlur(data)">
										</view>
									</view>

									<view class="custom-tree-node flex-ju-b width1000" @click="ziyuanShuClick(data)">
										<view class="flex-a-i width1000">

											<view v-if="data.onlineStatus==1" class="staDian">

											</view>
											<view v-if="data.onlineStatus==2" class="staDian1">

											</view>
											<image mode="widthFix" v-if="data.onlineStatus==1&&data.cameraType==3"
												class="image width45" src="/static/img/shexaingtou.png">
											</image>
											<image mode="widthFix" v-if="data.onlineStatus==0&&data.cameraType==3"
												class="image width45" src="/static/img/jiankong/66.png">
											</image>
											<image mode="widthFix" v-if="data.onlineStatus==1&&data.cameraType!=3"
												class="image width45" src="/static/img/jiankong/96.png">
											</image>
											<image mode="widthFix" v-if="data.onlineStatus==0&&data.cameraType!=3"
												class="image width45" src="/static/img/jiankong/97.png">
											</image>
											<view class="labelText">{{data.name}}</view>
										</view>
									</view>
								</template>
							</el-tree>
							<view class="u-f-justify u-f-column " style="padding-top: 100px;" v-else>
								<view>
									<image style="width: 200px;" src="/static/img/jiankong/42.png" mode="widthFix">
									</image>
								</view>
								<view>暂未查询到内容</view>
							</view>
						</view>
					</view>
					<view class="leftBottom u-f-column u-f"
						v-if="shiPingLiuList[itemIndex]&&shiPingLiuList[itemIndex].streamUrl">
						<view class="caoZuo u-f-item u-f-jsb">
							<view class="left u-f-item">
								<view class="tabItem u-f-justify cursor" :class="{tabItem1:tabIndex==index}"
									v-for="(item,index) in tabList" :key="index" @click="tabIndex = index">
									{{item.name}}
									<view v-if="tabIndex==index"></view>
								</view>
							</view>
							<template v-if="shiPingLiuList[itemIndex].is_support_ptz==1&&checkInfo.canOperate==1">
								<el-popconfirm title="锁定云台后，只有当前登录用户 可以操作云台，确认锁定吗？" @confirm="suoDingYunTai">
									<template #reference>
										<view class="right u-f-justify">
											<view class="icon cursor">
												<image src="/static/img/jiankong/57.png" class="img" mode="widthFix">
												</image>
											</view>
											<view class="text cursor">锁定</view>
										</view>
									</template>
								</el-popconfirm>
							</template>
							<view class="right u-f-justify" @click="jieSuoYunTai"
								v-if="shiPingLiuList[itemIndex].is_support_ptz==1&&checkInfo.canOperate==0&&user.userId==checkInfo.userId">
								<view class="icon cursor">
									<image src="/static/img/jiankong/57.png" class="img" mode="widthFix">
									</image>
								</view>
								<view class="text cursor">解锁</view>
							</view>
							<view class="right u-f-justify" @click="suoDingFn"
								v-if="shiPingLiuList[itemIndex].is_support_ptz==1&&checkInfo.canOperate==0&&user.userId!=checkInfo.userId">
								<view class="icon cursor">
									<image src="/static/img/jiankong/99.png" class="img" mode="widthFix"></image>
								</view>
								<view class="text cursor">已锁定</view>
							</view>
						</view>
						<view class=" flex1" v-if="tabList[tabIndex].index==1" style="position: relative;">
							<view class="suoName u-f-justify" v-if="suoDingFalg">
								<view>
									{{checkInfo.userName}}已锁定云台
								</view>
							</view>
							<view class="addYuzhidian u-f-justify cursor" @click="presetStaFalg"
								v-if="checkInfo.canOperate==1">
								<view class="u-f-justify">
									<image src="/static/img/jiankong/62.png" style="width: 14px;margin-right: 5px;"
										mode="widthFix">
									</image>
								</view>
								<view>添加预置点</view>
							</view>
							<view class="yunkongzhi u-f-justify u-f ">
								<view class="kongzhitai">
									<view class="kongzhiImg u-f-justify">
										<image src="/static/img/jiankong/58.png" class="img" mode="widthFix"></image>
										<view class="circle">
											<view class="sector u-f-justify " style="--i: 0;">

											</view>
											<view class="sector u-f-justify " style="--i: 1;">

											</view>
											<view class="sector u-f-justify " style="--i: 2;">

											</view>
											<view class="sector u-f-justify " style="--i: 3;">

											</view>
											<view class="sector u-f-justify " style="--i: 4;">

											</view>
											<view class="sector u-f-justify" style="--i: 5;">

											</view>
											<view class="sector u-f-justify" style="--i: 6;">

											</view>
											<view class="sector u-f-justify" style="--i: 7;">

											</view>
										</view>
										<view class="yuan u-f-justify">
											<view class="yuan1 u-f-justify">
												<view class="yuan2 u-f-justify"></view>
											</view>
										</view>
										<view class="jiantou1 u-f-justify" @click="yunTaiYiDong(1)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(180deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==1">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>

										</view>
										<view class="jiantou1 u-f-justify" @click="yunTaiYiDong(6)"
											style="transform: rotate(calc(45deg)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(180deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==6">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
										<view class="jiantou1 u-f-justify" @click="yunTaiYiDong(4)"
											style="transform: rotate(calc(90deg)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(180deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==4">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
										<view class="jiantou1 u-f-justify" @click="yunTaiYiDong(8)"
											style="transform: rotate(calc(135deg)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(180deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==8">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
										<view class="jiantou2 u-f-justify" @click="yunTaiYiDong(2)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(0deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==2">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
										<view class="jiantou2 u-f-justify" @click="yunTaiYiDong(7)"
											style="transform: rotate(calc(45deg)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(0deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==7">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
										<view class="jiantou2 u-f-justify" @click="yunTaiYiDong(3)"
											style="transform: rotate(calc(90deg)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(0deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==3">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
										<view class="jiantou2 u-f-justify" @click="yunTaiYiDong(5)"
											style="transform: rotate(calc(135deg)">
											<image src="/static/img/jiankong/105.png"
												style="width: 24px;transform: rotate(calc(0deg)" mode="widthFix"
												v-if="yunTaiYiDongIndex==5">
											</image>
											<image src="/static/img/jiankong/59.png" style="width: 24px;"
												mode="widthFix" v-else>
											</image>
										</view>
									</view>

								</view>
								<view class="jiajiang">
									<view class="item u-f-item">
										<view class="text">变倍</view>
										<view class="quan u-f-item u-f-jsb">
											<view class="u-f-justify" @click="yunTaiYiDong(11)">
												<image class="hover-img" src="/static/img/jiankong/60.png" style="width: 28px;"
													mode="widthFix">
												</image>
											</view>
											<view class="u-f-justify" @click="yunTaiYiDong(12)">
												<image class="hover-img"  src="/static/img/jiankong/61.png" style="width: 28px;"
													mode="widthFix">
												</image>
											</view>
										</view>
									</view>
									<view class="item u-f-item">
										<view class="text">焦点</view>
										<view class="quan u-f-item u-f-jsb">
											<view class="u-f-justify" @click="yunTaiYiDong(9)">
												<image class="hover-img"  src="/static/img/jiankong/60.png" style="width: 28px;"
													mode="widthFix">
												</image>
											</view>
											<view class="u-f-justify" @click="yunTaiYiDong(10)">
												<image class="hover-img"  src="/static/img/jiankong/61.png" style="width: 28px;"
													mode="widthFix">
												</image>
											</view>
										</view>
									</view>
									<view class="item u-f-item">
										<view class="text">光圈</view>
										<view class="quan u-f-item u-f-jsb">
											<view class="u-f-justify" @click="yunTaiYiDong(13)">
												<image class="hover-img"  src="/static/img/jiankong/60.png" style="width: 28px;"
													mode="widthFix">
												</image>
											</view>
											<view class="u-f-justify" @click="yunTaiYiDong(14)">
												<image class="hover-img"  src="/static/img/jiankong/61.png" style="width: 28px;"
													mode="widthFix">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>

							<view class="u-f-justify buchang">
								<view class="text">
									步长
								</view>
								<el-slider v-model="buChang" style="width: 200px;" :max="8" :min="1" />
								<view class="text">
									{{buChang}}
								</view>
							</view>
						</view>

						<view class="yuzhidian flex1 u-f-item u-f-column" v-if="tabList[tabIndex].index==2"
							style="position: relative;">
							<view class="suoName u-f-justify" v-if="suoDingFalg">
								<view>
									{{checkInfo.userName}}已锁定云台
								</view>
							</view>
							<view class="u-f-item">
								<uni-data-select :value="yuZhiDianListIten1" :localdata="yuZhiDianList1"
									@change="yuZhiDianXiaLaChange" :clear="false" style="width: 270px;color: #000;"
									class="custom-select">
								</uni-data-select>
								<view class=" zhuandao u-f-justify cursor" @click="zhuanDaoYuZhiDian">
									<view class="u-f-justify">
										<image src="/static/img/jiankong/63.png" style="width: 16px;" mode="widthFix">
										</image>
									</view>
									<view class="text">转到</view>
								</view>
							</view>
							<view class="u-f-item set">
								<view class="u-f-item">
									<view>
										<image src="/static/img/jiankong/64.png" style="width: 24px;" mode="widthFix">
										</image>
									</view>
									<view class="text">看守点</view>
								</view>
								<view class="box u-f-item">
									<view class="text">
										{{kanShouDianInfo.name}}
									</view>
								</view>
								<view class=" zhuandao u-f-justify cursor" @click="setKanShouDian">
									<view class="u-f-justify">
										<image src="/static/img/jiankong/65.png" style="width: 16px;" mode="widthFix">
										</image>
									</view>
									<view class="text">设置</view>
								</view>
							</view>
							<view class="paixu">
								<view class="titleItem u-f-item">
									<view class="item1">序号</view>
									<view class="item2">预置点</view>
									<view class="item3">操作</view>
								</view>
								<scroll-view scroll-y style="height:130px;">
									<view class="titleItem u-f-item" v-for="(item,index) in yuZhiDianList" :key="index">
										<view class="item1">{{index + 1}}</view>
										<view class="item2">{{item.presetName}}</view>
										<view class="item3 u-f-item">
											<view class="u-f-item bianji cursor" @click="bianJiYuZhiDian(item)">
												<view>
													<image src="/static/img/jiankong/67.png" style="width: 16px;"
														mode="widthFix"></image>
												</view>
												<view class="text">编辑</view>
											</view>
											<el-popconfirm title="删除后不可恢复，请谨慎操作!" @confirm="shanChuYuZhiDian(item)">
												<template #reference>
													<view class="u-f-item shanchu cursor">
														<view>
															<image src="/static/img/jiankong/68.png"
																style="width: 16px;" mode="widthFix"></image>
														</view>
														<view class="text">删除</view>
													</view>
												</template>
											</el-popconfirm>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>

						<view class="cruise flex1  u-f-column" v-if="tabList[tabIndex].index==3"
							style="position: relative;">
							<view class="suoName u-f-justify" v-if="suoDingFalg">
								<view>
									{{checkInfo.userName}}已锁定云台
								</view>
							</view>
							<view class="addYuzhidian u-f-justify cursor" @click="tianJiaXunHang ">
								<view class="u-f-justify">
									<image src="/static/img/jiankong/62.png" style="width: 14px;margin-right: 5px;"
										mode="widthFix">
									</image>
								</view>
								<view>添加巡航</view>
							</view>
							<view class="u-f-item u-f-jsb ">
								<view>
									<uni-data-select :value="xunHangXuanZhong" :localdata="xunHangList1"
										@change="xunHangXuanZhongChange" :clear="false"
										style="width: 270px;color: #000;" class="custom-select">
									</uni-data-select>
								</view>
								<view class="ksxh u-f-justify cursor" @click="kaiShiXunHang(2)"
									v-if="xunHangXuanZhong!==''&&xunHangList[xunHangXuanZhong].isCruise==0">
									<view class="icon">
										<image src="/static/img/jiankong/69.png" style="width: 14px;margin-right: 5px;"
											mode="widthFix">
										</image>
									</view>
									<view>
										开始巡航
									</view>
								</view>
								<el-popconfirm title="确认停止当前巡航吗？" @confirm="kaiShiXunHang(1)">
									<template #reference>
										<view class="ksxh u-f-justify cursor"
											v-if="xunHangXuanZhong!==''&&xunHangList[xunHangXuanZhong].isCruise==1">
											<view class="icon">
												<image src="/static/img/jiankong/98.png"
													style="width: 14px;margin-right: 5px;" mode="widthFix">
												</image>
											</view>
											<view>
												停止巡航
											</view>
										</view>
									</template>
								</el-popconfirm>

							</view>
							<view class="paixu">
								<view class="titleItem u-f-item">
									<view class="item1">序号</view>
									<view class="item2">巡航</view>
									<view class="item3">操作</view>
								</view>
								<view class="titleItem u-f-item" v-for="(item,index) in xunHangList" :key="index">
									<view class="item1">{{index + 1}}</view>
									<view class="item2">{{item.patrolName}}</view>
									<view class="item3 u-f-item">
										<view class="u-f-item bianji cursor" @click="bianJiXunHangFn(item)">
											<view>
												<image src="/static/img/jiankong/67.png" style="width: 16px;"
													mode="widthFix"></image>
											</view>
											<view class="text">编辑</view>
										</view>
										<el-popconfirm title="确定删除巡航吗？" @confirm="shanChuXunHangItem(item)">
											<template #reference>
												<view class="u-f-item shanchu cursor">
													<view>
														<image src="/static/img/jiankong/68.png" style="width: 16px;"
															mode="widthFix"></image>
													</view>
													<view class="text">删除</view>
												</view>
											</template>
										</el-popconfirm>

									</view>
								</view>
							</view>
						</view>
						<view class="VideoParameters flex1  u-f-column u-f-justify" v-if="tabList[tabIndex].index==4"
							style="position: relative;">
							<view class="item u-f-item">
								<view class="left">亮度</view>
								<view class="right">
									<el-slider v-model="sliderValue1" :step="10" show-stops :max="100"
										@change="sliderChange(1)" />
								</view>
							</view>
							<view class="item u-f-item">
								<view class="left">对比度</view>
								<view class="right">
									<el-slider v-model="sliderValue2" :step="10" show-stops :max="100"
										@change="sliderChange(2)" />
								</view>
							</view>
							<view class="item u-f-item">
								<view class="left">饱和度</view>
								<view class="right">
									<el-slider v-model="sliderValue3" :step="10" show-stops :max="100"
										@change="sliderChange(3)" />
								</view>
							</view>
							<view class="item u-f-item">
								<view class="left">色度</view>
								<view class="right">
									<el-slider v-model="sliderValue4" :step="10" show-stops :max="100"
										@change="sliderChange(4)" />
								</view>
							</view>
							<view class="item u-f-item">
								<view class="left">锐度</view>
								<view class="right">
									<el-slider v-model="sliderValue5" :step="10" show-stops :max="100"
										@change="sliderChange(5)" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ces" v-show="!conLeft">
				<image mode="widthFix" class="image width60 posiab right0 cursor" :style="{top:hhg/2-48+'px'}"
					src="/static/img/gsuanbi.png" @click="conLeft = !conLeft"></image>
			</view>

			<view class="u-f u-f-column colorfff flex1 rightBox"
				:class="{hegtih100:fullScreenFlag,quanPing:fullScreenFlag}">
				<view class="flex1 videoList " :class="{quanPing:fullScreenFlag}" v-show="!danFenPing">
					<!-- 1分屏 -->
					<view class="img xuanZhongXiaoGuo" v-if="splitScreenStatus==1">
						<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
							@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
							@liuMaClick="liuMaClick" @DuiJiangClick="duiJiangClick">
						</spItem>
					</view>
					<!-- 4分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==2">
						<view class="flex1 u-f-item">
							<view class="flex1" v-for="(item,index) in 2" @click="smallWindowItemClick(index)"
								:class="{xuanZhongXiaoGuo:itemIndex==index,mar10:index==0}" style="height: 100%;">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="flex1 u-f-item" style="margin-top: 10px;">
							<view class="flex1" v-for="(item,index) in 2" @click="smallWindowItemClick(index + 2) "
								:class="{xuanZhongXiaoGuo:itemIndex==index + 2,mar10:index==0}" style="height: 100%;">
								<spItem :item="shiPingLiuList[index + 2]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 6分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==3">
						<view class="u-f u-f-jsb" style="height: 66%;width: 100%;">
							<view style="height: 100%;width: 66.5%;" :class="{xuanZhongXiaoGuo:itemIndex==0}"
								@click="smallWindowItemClick(0) ">
								<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
							<view class=" u-f u-f-column" style="width: 33%;">
								<view class="flex1" v-for="(item,index) in 2" @click="smallWindowItemClick(index + 1) "
									:class="{xuanZhongXiaoGuo:itemIndex==index + 1,mab10:index==0}">
									<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										@liuMaClick="liuMaClick">
									</spItem>
								</view>
							</view>
						</view>
						<view class="flex1 u-f-item u-f-jsb" style="height: 33%;margin-top: 10px;">
							<view class=" img" style="width: 33%;" v-for="(item,index) in 3"
								@click="smallWindowItemClick(index + 3) "
								:class="{xuanZhongXiaoGuo:itemIndex==index + 3}">
								<spItem :item="shiPingLiuList[index + 3]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 8分屏 -->
					<view class="img u-f u-f-jsb" v-if="splitScreenStatus==4">
						<view class="u-f-column u-f-jsb" style="width: 75%;height: 100%;margin-right: 10px;">
							<view class="img" style="height: 75%;" :class="{xuanZhongXiaoGuo:itemIndex==0}"
								@click="smallWindowItemClick(0) ">
								<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
							<view class="u-f-item u-f-jsb" style="height: 24.7%;margin-top: 10px;">
								<view class="img flex1" v-for="(item,index) in 3"
									@click="smallWindowItemClick(index + 1)"
									:class="{xuanZhongXiaoGuo:itemIndex==index + 1,mar10:index==0||index==1}">
									<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										@liuMaClick="liuMaClick">
									</spItem>
								</view>
							</view>
						</view>
						<view class="flex1 u-f u-f-column" style="padding-right: 10px;">
							<view class="img flex1 "
								:class="{xuanZhongXiaoGuo:itemIndex==index + 4,mab10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 4) ">
								<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 9分屏 -->
					<view class="u-f img" v-if="splitScreenStatus==5">
						<view class="u-f u-f-column flex1 img">
							<view class="img flex1"
								:class="{xuanZhongXiaoGuo:itemIndex==index,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f u-f-column flex1 img" style="margin: 0 10px;">
							<view class="img flex1"
								:class="{xuanZhongXiaoGuo:itemIndex==index + 3,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index + 3) ">
								<spItem :item="shiPingLiuList[index + 3]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f u-f-column flex1 img">
							<view class="img flex1"
								:class="{xuanZhongXiaoGuo:itemIndex==index + 6,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index + 6) ">
								<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 13分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==6">
						<view class="flex1 u-f-item">
							<view class="img flex1"
								:class="{xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f" style="flex: 2;margin:10px 0">
							<view class="flex1 u-f-column u-f">
								<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mab10:index==0}"
									v-for="(item,index) in 2" @click="smallWindowItemClick(index + 4) ">
									<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										@liuMaClick="liuMaClick">
									</spItem>
								</view>
							</view>
							<view style="flex: 2;margin: 0 10px;" :class="{xuanZhongXiaoGuo:itemIndex==6}"
								@click="smallWindowItemClick(6) ">
								<spItem :item="shiPingLiuList[6]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
							<view class="flex1 u-f-column u-f">
								<view class="img flex1" :class="{xuanZhongXiaoGuo:itemIndex==index + 7,mab10:index==0}"
									v-for="(item,index) in 2" @click="smallWindowItemClick(index + 7) ">
									<spItem :item="shiPingLiuList[index + 7]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										@liuMaClick="liuMaClick">
									</spItem>
								</view>
							</view>
						</view>
						<view class="flex1 u-f-item">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 9,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 9) ">
								<spItem :item="shiPingLiuList[index + 9]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 15分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==7||splitScreenStatus==19">
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin: 10px 0;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 5,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 5) ">
								<spItem :item="shiPingLiuList[index + 5]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 10,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 10) ">
								<spItem :item="shiPingLiuList[index + 10]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 16分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==8||splitScreenStatus==20">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 4) ">
								<spItem :item="shiPingLiuList[index +4]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +8,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 8) ">
								<spItem :item="shiPingLiuList[index +8]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +12,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 12) ">
								<spItem :item="shiPingLiuList[index +12]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>

					<!-- 20分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==9||splitScreenStatus==21">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +5,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 5) ">
								<spItem :item="shiPingLiuList[index +5]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +10,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 10) ">
								<spItem :item="shiPingLiuList[index +10]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +15,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 15) ">
								<spItem :item="shiPingLiuList[index +15]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>

					<!-- 25分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==10">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +5,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 5) ">
								<spItem :item="shiPingLiuList[index +5]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +10,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 10) ">
								<spItem :item="shiPingLiuList[index +10]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +15,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 15) ">
								<spItem :item="shiPingLiuList[index +15]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +20,mar10:index==0||index==1||index==2||index==3}"
								v-for="(item,index) in 5" @click="smallWindowItemClick(index + 20) ">
								<spItem :item="shiPingLiuList[index +20]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>

					<!-- 32分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==11">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class="{xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +8,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 8) ">
								<spItem :item="shiPingLiuList[index + 8]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +16,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 16) ">
								<spItem :item="shiPingLiuList[index + 16]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +24,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 24) ">
								<spItem :item="shiPingLiuList[index + 24]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 36分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==12||splitScreenStatus==23">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 6,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 6) ">
								<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 12,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 12) ">
								<spItem :item="shiPingLiuList[index + 12]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 18,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 18) ">
								<spItem :item="shiPingLiuList[index + 18]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 24,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 24) ">
								<spItem :item="shiPingLiuList[index + 24]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 30,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 30) ">
								<spItem :item="shiPingLiuList[index + 30]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>


					<!-- 64分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==13">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +8,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 8) ">
								<spItem :item="shiPingLiuList[index +8]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+16,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 16) ">
								<spItem :item="shiPingLiuList[index+16]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+24,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 24) ">
								<spItem :item="shiPingLiuList[index+24]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+32,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 32) ">
								<spItem :item="shiPingLiuList[index+32]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+40,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 40) ">
								<spItem :item="shiPingLiuList[index+40]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+48,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 48) ">
								<spItem :item="shiPingLiuList[index+48]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+56,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 56) ">
								<spItem :item="shiPingLiuList[index + 56]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>

					<!-- 宽屏 4分屏 -->
					<view class="img u-f-item" v-if="splitScreenStatus==14">
						<view class="flex1 img" @click="smallWindowItemClick(0) "
							:class=" {xuanZhongXiaoGuo:itemIndex==0}">
							<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
								@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
								@liuMaClick="liuMaClick"></spItem>
						</view>
						<view class="flex1 img u-f-column u-f" style="margin-left: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index+1,mar10:index==0||index==1,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index + 1) ">
								<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 宽屏 6分屏 -->
					<view class="img u-f-item u-f-column" v-if="splitScreenStatus==15">
						<view class="u-f-item flex1 img">
							<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0}"
								v-for="(item,index) in 2" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="flex1 img u-f-item" style="margin-top: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index +2,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 2) ">
								<spItem :item="shiPingLiuList[index + 2]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 宽屏 7分屏 -->
					<view class="img u-f" v-if="splitScreenStatus==16">
						<view class="flex1 u-f u-f-column img">
							<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index,mab10:index==0}"
								v-for="(item,index) in 2" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="flex1 u-f u-f-column img" style="margin: 0 10px;">
							<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index + 2,mab10:index==0}"
								v-for="(item,index) in 2" @click="smallWindowItemClick(index + 2) ">
								<spItem :item="shiPingLiuList[index + 2]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="flex1 u-f u-f-column img">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index + 4) ">
								<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 宽屏 9分屏 -->
					<view class="img u-f" v-if="splitScreenStatus==17">
						<view class="u-f u-f-column img" style="flex:2">
							<view class="" style="flex:2;margin-bottom: 10px;" @click="smallWindowItemClick(0) "
								:class="{xuanZhongXiaoGuo:itemIndex==0}">
								<spItem :item="shiPingLiuList[0]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
							<view class="u-f flex1">
								<view class="img flex1" :class=" {xuanZhongXiaoGuo:itemIndex==index + 1,mar10:index==0}"
									v-for="(item,index) in 2" @click="smallWindowItemClick(index + 1) ">
									<spItem :item="shiPingLiuList[index + 1]" @chaHaoClick="chaHaoClick"
										@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
										@liuMaClick="liuMaClick">
									</spItem>
								</view>
							</view>
						</view>
						<view class="flex1 u-f img u-f-column" style="margin: 0 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 3,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index + 3) ">
								<spItem :item="shiPingLiuList[index + 3]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="flex1 u-f img u-f-column">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 6,mab10:index==0||index==1}"
								v-for="(item,index) in 3" @click="smallWindowItemClick(index + 6) ">
								<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 12分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==18">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 4,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 4) ">
								<spItem :item="shiPingLiuList[index + 4]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 8,mar10:index==0||index==1||index==2}"
								v-for="(item,index) in 4" @click="smallWindowItemClick(index + 8) ">
								<spItem :item="shiPingLiuList[index + 8]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 24分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==22">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 6,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 6) ">
								<spItem :item="shiPingLiuList[index + 6]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 12,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 12) ">
								<spItem :item="shiPingLiuList[index + 12]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 18,mar10:index==0||index==1||index==2||index==3||index==4}"
								v-for="(item,index) in 6" @click="smallWindowItemClick(index + 18) ">
								<spItem :item="shiPingLiuList[index + 18]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
					<!-- 48分屏 -->
					<view class="img u-f u-f-column" v-if="splitScreenStatus==24">
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index) ">
								<spItem :item="shiPingLiuList[index]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 8,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 8) ">
								<spItem :item="shiPingLiuList[index + 8]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 16,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 16) ">
								<spItem :item="shiPingLiuList[index + 16]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 24,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 24) ">
								<spItem :item="shiPingLiuList[index + 24]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 32,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 32) ">
								<spItem :item="shiPingLiuList[index + 32]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
						<view class="u-f flex1" style="margin-bottom: 10px;">
							<view class="img flex1"
								:class=" {xuanZhongXiaoGuo:itemIndex==index + 40,mar10:index==0||index==1||index==2||index==3||index==4||index==5||index==6}"
								v-for="(item,index) in 8" @click="smallWindowItemClick(index + 40) ">
								<spItem :item="shiPingLiuList[index + 40]" @chaHaoClick="chaHaoClick"
									@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
									@liuMaClick="liuMaClick">
								</spItem>
							</view>
						</view>
					</view>
				</view>
				<view class="flex1 videoList" :class="{quanPing:fullScreenFlag}" v-show="danFenPing"
					@click="danFenPingClick">
					<!-- 1分屏 -->
					<view class="img">
						<spItem :item="shiPingLiuList[itemIndex]" @chaHaoClick="chaHaoClick"
							@handleMenuItemClick="handleMenuItemClick" @onCaptureFinish="onCaptureFinish"
							@liuMaClick="liuMaClick">
						</spItem>
					</view>
				</view>
				<view class="dibucaozuo height140 bg2c2c2c  flex-ju-b size28" v-show="!fullScreenFlag">
					<view class="flex-a-i ml30">
						轮巡任务：
						<uni-data-select v-model="planListItem" :localdata="planList" :clear="false"
							style="width: 270px;color: #000;z-index: 999;" class="custom-select" placement="top"
							:disabled="planInfo.id">
						</uni-data-select>
						<view class="lunxun u-f-item u-f-justify cursor" @click="kaiShiLunXun">
							<view>
								<image src="/static/img/jiankong/9.png" class="u-f-justify"
									style="width: 16px;margin-right: 5px;" mode="widthFix" v-if="!planInfo.id"></image>

								<image src="/static/img/jiankong/98.png" v-else style="width: 14px;margin-right: 5px;"
									mode="widthFix">
								</image>
							</view>
							<view>
								{{planInfo.id?'停止轮巡':'开始轮巡'}}
							</view>
						</view>
						<el-popconfirm title="确定要关闭所有视频吗？" @confirm="guanBiSuoYouShiPing">
							<template #reference>
								<view class="lunxun cursor u-f-item u-f-justify">
									<view>
										<image src="/static/img/jiankong/10.png" class="u-f-justify"
											style="width: 16px;margin-right: 5px;" mode="widthFix"></image>
									</view>
									<view>
										关闭所有视频
									</view>
								</view>
							</template>
						</el-popconfirm>

					</view>

					<view class="flex-a-i mr30">
						<view class="lunxun u-f-item u-f-justify cursor" @click.stop="screenSetFlag = !screenSetFlag">
							<view>
								<image src="/static/img/jiankong/11.png" class="u-f-justify"
									style="width: 16px;margin-right: 5px;" mode="widthFix"></image>
							</view>
							<view>
								布局
							</view>
						</view>
						<view class="lunxun u-f-item u-f-justify cursor" @click="quanPingFn ">
							<view>
								<image src="/static/img/jiankong/12.png" class="u-f-justify"
									style="width: 16px;margin-right: 5px;" mode="widthFix"></image>
							</view>
							<view>
								全屏
							</view>
						</view>
					</view>
				</view>
			</view>



			<!-- <view class="flex-ju-c" :style="{height:hhg+'px'}">
				<view class="bgfff posiab right0 size24 ra10">
					<view class="flex-ju-c flex-col wh150-150">
						<image mode="widthFix" class="image width64" src="/static/img/baojing.png"></image>
						报警管理
					</view>
					<view class="flex-ju-c flex-col wh150-150">
						<image mode="widthFix" class="image width64" src="/static/img/bendi.png"></image>
						我的资源
					</view>
					<view class="flex-ju-c flex-col wh150-150">
						<image mode="widthFix" class="image width64" src="/static/img/lunxun.png"></image>
						轮巡计划
					</view>
					<view class="flex-ju-c flex-col wh150-150">
						<image mode="widthFix" class="image width64" src="/static/img/yuyin.png"></image>
						语音广播
					</view>
					<view class="flex-ju-c flex-col wh150-150">
						<image mode="widthFix" class="image width64" src="/static/img/shishis.png"></image>
						实时监控
					</view>
					<view class="flex-ju-c flex-col wh150-150">
						<image mode="widthFix" class="image width64" src="/static/img/luxiang.png"></image>
						录像回放
					</view>
				</view>
			</view> -->


		</view>

		<!-- 添加收藏 -->
		<view class="addCollection u-f-justify" v-if="addCollectionFalg">
			<view class="box u-f u-f-column">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">

						</view>
						<view class="text">
							添加收藏
						</view>
					</view>
					<view class="icon cursor" @click="addCollectionFalg = false">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 collceng">
					<view class="caoz u-f-item u-f-jsb">
						<view class="left u-f-item">
							<view class="icon">
								<image src="/static/img/jiankong/38.png" class="img" mode="widthFix"></image>
							</view>
							<view class="text">
								选择收藏分组
							</view>
						</view>
						<view class="right u-f-justify cursor" @click="chuangJianShouChangJia">
							创建收藏夹
						</view>
					</view>
					<view class="colllist">
						<el-tree style="" :data="shouchangList" node-key="id" :expand-on-click-node="false"
							@node-click="nodeClick" v-if="shouchangList.length" :default-expanded-keys="false"
							default-expand-all>
							<template #default="{ node, data }">
								<view class="labelText u-f-item">
									<view v-if="data.favoritesName">
										<image src="/static/img/jiankong/55.png" style="width: 24px;" mode="widthFix">
										</image>
									</view>
									<view class="text singleLine" v-if="data.id!=shouChangId"
										@click="shouChangItemClick(data)">

										{{data.favoritesName}} <text v-if="zhuZhiId==data.id"
											style="white-space:nowrap;color:#165FFF">（已选中分组）</text>
									</view>
									<view class="input u-f-item" v-else>
										<input type="text" v-model="data.favoritesName" focus @blur="inputBlur(data)">
									</view>
								</view>
								<view class="custom-tree-node flex-ju-b width1000" v-if="data.name">
									<view class="flex-a-i">
										<view class="labelText">{{data.name}} (通道)</view>
									</view>
								</view>
							</template>
						</el-tree>

					</view>
				</view>
				<view class="collbott u-f-item u-f-jsb">
					<view>

					</view>
					<view class="u-f-item">
						<view class="quxiao u-f-justify cursor" @click="addCollectionFalg = false">取消</view>
						<view class="queding u-f-justify cursor" @click="quanDingTianJiaShouCang">确定</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 添加到轮询 -->
		<view class="addCollection u-f-justify" v-if="turningFalg">
			<view class="box u-f u-f-column" style="height: 300px;">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">

						</view>
						<view class="text">
							添加到轮巡
						</view>
					</view>
					<view class="icon cursor" @click="turningFalg = false">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 collceng1 u-f-column u-f-justify">
					<view class="item u-f-item">
						<view class="text">
							轮巡计划：
						</view>
						<view>
							<uni-data-select v-model="planListItem1" :localdata="planList"
								@change="yuZhiDianXiaLaChange2" :clear="false" style="width: 331px;color: #000;"
								class="custom-select1" placement="top">
							</uni-data-select>
						</view>
					</view>
					<view class="item u-f-item">
						<view class="text">
							窗口：
						</view>
						<view>
							<uni-data-select v-model="chuangKou" :localdata="chuangKouShuLiangList"
								@change="yuZhiDianXiaLaChange3" :clear="false" style="width: 331px;color: #000;"
								class="custom-select1" placement="top" :disabled="!planListItem1">
							</uni-data-select>
						</view>
					</view>
					<view class="item u-f-item">
						<view class="text">
							停留时间：
						</view>
						<view style="width: 331px;">
							<el-input class="custom-number-input" v-model="pollStayTime" type="number" placeholder="秒"
								:max="600" :min="20" />
						</view>
					</view>
				</view>
				<view class="collbott u-f-item u-f-jsb">
					<view>

					</view>
					<view class="u-f-item">
						<view class="quxiao u-f-justify cursor" @click="turningFalg = false">取消</view>
						<view class="queding u-f-justify cursor" @click="queDingTianJiaLunXun">确定</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加到巡航 -->
		<view class="addCollection u-f-justify" v-if="cruiseFalg">
			<view class="box u-f u-f-column" style="height: 501px;width: 650px;">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">

						</view>
						<view class="text">
							{{bianJiXunHang?'编辑':'添加'}}巡航
						</view>
					</view>
					<view class="icon cursor" @click="cruiseFalg = false">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 collceng3 u-f-column u-f">
					<view class="item u-f-item">
						<view class="text" style="width: 100px;">
							巡航名称：
						</view>
						<view>
							<el-input v-model="xunHangMingCheng" style="width: 240px" placeholder="请输入巡航名称" />
						</view>
					</view>
					<view class="u-f">
						<view class="yzd">
							<view class="top u-f-item">
								<text>
									预置点
								</text>
							</view>
							<scroll-view scroll-y="true" style="height: 264px;width: 238px;" >
								<view class="u-f u-f-column duoxuan" >
									<el-checkbox v-model="item.falg" :label="item.presetName" size="large"
										v-for="(item,index) in yuZhiDianList" :key="index" />
								</view>
							</scroll-view>
						</view>
						<view class="yixuan">
							<view class="top u-f-item">
								<text>
									已选预置点
								</text>
							</view>
							<view class="Ltitle u-f-item u-f-jsb">
								<view class="item1">预置点名称</view>
								<view class="item2">停留时间（秒）</view>
								<view class="item3">操作</view>
							</view>
							<scroll-view scroll-y="true" style="height: 200px;width: 328px;" >
								<view class="Ltitle u-f-item u-f-jsb Ltitle1" v-for="(item,index) in yuZhiDianList"
									:key="index" v-show="item.falg">
									<view class="item1">{{item.presetName}}</view>
									<view class="item2">
										<el-input v-model="item.staySeconds" :max="600" :min="1" type="number"
											style="width: 60px" placeholder="秒" />
									</view>
									<view class="item3 u-f-justify" @click="item.falg = false,item.staySeconds = ''">
										<image src="/static/img/jiankong/70.png" mode="widthFix"></image>
									</view>
								</view>
							</scroll-view>
							

						</view>
					</view>

				</view>
				<view class="collbott u-f-item u-f-jsb">
					<view>

					</view>
					<view class="u-f-item">
						<view class="quxiao u-f-justify cursor" @click="cruiseFalg = false">取消</view>
						<view class="queding u-f-justify cursor" @click="baoCunTianJiaXunHang">保存</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 未处理的报警 -->
		<!-- <view class="addCollection u-f-justify">
			<view class="box u-f u-f-column" style="width: 1242px;height: 724px;">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">

						</view>
						<view class="text">
							未处理的报警
						</view>
					</view>
					<view class="icon cursor" @click="turningFalg = false">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 collceng2 ">
					<view class="u-f-item">
						<view class="u-f-item">
							<view>
								报警等级：
							</view>
							<view>
								<el-select v-model="value" placeholder="Select"
									style="width: 114px;border: 1px solid #CED4DB;">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</view>
						</view>
						<view class="u-f-item ml30">
							<view>
								报警时间：
							</view>
							<view>
								<el-date-picker v-model="value2" type="datetimerange" start-placeholder="Start date"
									end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
									time-format="A hh:mm:ss" />
							</view>
						</view>
					</view>
					<view class="list">
						<view class="item u-f-item">
							<view class="item1 u-f-justify">序号</view>
							<view class="item2 u-f-justify ">时间</view>
							<view class="item3 u-f-justify">所在区域</view>
							<view class="item4 u-f-justify">报警源</view>
							<view class="item5 u-f-justify">报警类型</view>
							<view class="item6 u-f-justify">报警等级</view>
							<view class="item7 u-f-justify">报警次数</view>
							<view class="item8 u-f-justify">处理状态</view>
							<view class="item9 u-f-justify">操作</view>
						</view>
						<view class="item u-f-item itembai">
							<view class="item1 u-f-justify">1</view>
							<view class="item2 u-f-justify ">2024-12-24 12:00:00</view>
							<view class="item3 u-f-justify">华北分公司</view>
							<view class="item4 u-f-justify">这是一个通道名称</view>
							<view class="item5 u-f-justify">移动侦探</view>
							<view class="item6 u-f-justify">
								<view class="u-f-justify dengji">
									<view class="icon u-f-justify">
										<image src="/static/img/jiankong/41.png" class="img" mode="widthFix"></image>
									</view>
									<view class="text">紧急</view>
								</view>
							</view>
							<view class="item7 u-f-justify">1</view>
							<view class="item8 u-f-justify">
								<view class="u-f-justify">未处理</view>
							</view>
							<view class="item9 u-f-justify">查看详情</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 添加或者编辑预置点 -->
		<view class="addCollection u-f-justify" v-if="presetFalg">
			<view class="box u-f u-f-column" style="height: 270px;">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">

						</view>
						<view class="text">
							{{yuZhiDianListIten.presetId?'编辑预置点':'添加预置点'}}
						</view>
					</view>
					<view class="icon cursor" @click="presetFalg = false">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 collceng1 u-f-column u-f-justify">
					<view class="item u-f-item">
						<view class="text" style="width: 100px;">
							预置点名称：
						</view>
						<view>
							<el-input v-model="yuZhiDianName" style="width: 240px" placeholder="请输入预置点名称" />
						</view>
					</view>
				</view>
				<view class="collbott u-f-item u-f-jsb">
					<view>

					</view>
					<view class="u-f-item">
						<view class="quxiao u-f-justify cursor" @click="presetFalg = false">取消</view>
						<view class="queding u-f-justify cursor" @click="addYuZhiDinClick">确定</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 设置看守点 -->
		<view class="addCollection u-f-justify" v-if="setGuardFalg">
			<view class="box u-f u-f-column" style="height: 270px;">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">
						</view>
						<view class="text">
							设置看守点
						</view>
					</view>
					<view class="icon cursor" @click="guanBiKanShouDian">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 collceng1 u-f-column u-f-justify">
					<view class="guarTop u-f-item">
						<view class="u-f-item">
							<view class="mar10">
								看守点状态：
							</view>
							<view class="mar10">
								<el-switch v-model="kanShouSta" />
							</view>
							<view>
								打开
							</view>
						</view>
						<view class="u-f-item" style="margin-left: 20px;">
							<view class="text">
								自动归位时间：
							</view>
							<view class="mar10">
								<el-input type="number" :max="600" :min="1" v-model="ziDongGuiWeiTime"
									style="width: 100px" placeholder="请输入秒" />
							</view>
							<view>
								秒
							</view>
						</view>
					</view>
					<view class="item u-f-item">
						<view class="text" style="width: 100px;">
							看守位名称：
						</view>
						<view>
							<uni-data-select v-model="kanShouName" :localdata="yuZhiDianList1"
								@change="yuZhiDianXiaLaChange1" :clear="false" style="width: 331px;color: #000;"
								class="custom-select1">
							</uni-data-select>
						</view>
					</view>
				</view>
				<view class="collbott u-f-item u-f-jsb">
					<view>

					</view>
					<view class="u-f-item">
						<view class="quxiao u-f-justify cursor" @click="guanBiKanShouDian">取消</view>
						<view class="queding u-f-justify cursor" @click="queDingSheZhiKanShouDian">确定</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 抓图弹窗 -->
		<view class="zhuaTuTacnChuang u-f-justify" v-if="zhuaTuTanChuang">
			<view class="box u-f u-f-column" style="width: 806px;">
				<view class="collTop u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="shu">
						</view>
						<view class="text">
							抓图
						</view>
					</view>
					<view class="icon cursor" @click="zhuaTuTanChuang = false">
						<image src="/static/img/jiankong/37.png" class="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex1 zhuaTu">
					<view class="zhongYao u-f">
						<view class="left u-f-justify">
							<swiper class="img">
								<swiper-item class="img" v-for="(item,index) in zhuaTuTanChuangInfo.list" :key="index">
									<image :src="item.base64" class="img" mode="aspectFit"></image>
								</swiper-item>
							</swiper>
							<view class="zuo">
								<image src="/static/img/jiankong/73.png" class="img" mode="widthFix"></image>
							</view>
							<view class="you">
								<image src="/static/img/jiankong/72.png" class="img" mode="widthFix"></image>
							</view>
							<view class="zuoBiao">
								<view class="item u-f-justify" v-for="(item,index) in zhuaTuTanChuangInfo.list.length"
									:key="index">
									<view></view>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="item">通道名称：{{zhuaTuTanChuangInfo.name}}</view>
							<view class="item">抓图时间：{{ new Date().toLocaleString() }}</view>
							<view class="item">抓图人：{{user.nickName}}</view>
							<view class="item u-f-item">
								<view>抓图原因：</view>
								<view>
									<uni-data-select :value="screenshotReasonValue" :localdata="screenshotReasonList"
										@change="screenshotReasonChange" :clear="false"
										style="width: 170px;color: #000;background-color: #fff;" class="zhuaTuselect">
									</uni-data-select>
								</view>
							</view>

						</view>
					</view>
					<view class="beizhu">
						<el-input v-model="zhuaTuBeiZhu" style="width: 100%;margin-top: 20px;" :rows="2" type="textarea"
							placeholder="请输入抓图备注" />
					</view>
				</view>
				<view class="collbott u-f-item u-f-jsb">
					<view></view>
					<view class="u-f-item">
						<view class="quxiao u-f-justify cursor" @click="zhuaTuTanChuang = false">取消</view>
						<view class="queding u-f-justify cursor" @click="baoCunZhuaTu">保存</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 布局的弹窗 -->
		<view class="LayoutPop" v-show="screenSetFlag" ref="LayoutPop">
			<view class="title">
				标准布局
			</view>
			<view class="list u-f-wrap u-f">
				<view class="item u-f-justify u-f-column cursor" v-for="(item,index) in screenSetList" :key="index"
					:class="{item1:splitScreenStatus==item.sta}"
					@click="splitScreenStatus = item.sta,itemIndex = 0,danFenPing = false,getSliderVluer()">
					<view class="icon">
						<image :src="splitScreenStatus==item.sta?item.icon1:item.icon" class="img" mode="widthFix">
						</image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
			<view class="title">
				宽屏布局
			</view>
			<view class="list u-f-wrap u-f">
				<view class="item u-f-justify u-f-column cursor" v-for="(item,index) in screenSetList2" :key="index"
					:class="{item1:splitScreenStatus==item.sta}"
					@click="splitScreenStatus = item.sta,itemIndex = 0,danFenPing = false,getSliderVluer()">
					<view class="icon">
						<image :src="splitScreenStatus==item.sta?item.icon1:item.icon" class="img" mode="widthFix">
						</image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		ElMessage
	} from 'element-plus'
	// 引入 布局未选中的图片
	import img22 from "@/static/img/jiankong/22.png"
	import img23 from "@/static/img/jiankong/23.png"
	import img24 from "@/static/img/jiankong/24.png"
	import img25 from "@/static/img/jiankong/25.png"
	import img26 from "@/static/img/jiankong/26.png"
	import img27 from "@/static/img/jiankong/27.png"
	import img28 from "@/static/img/jiankong/28.png"
	import img29 from "@/static/img/jiankong/29.png"
	import img30 from "@/static/img/jiankong/30.png"
	import img31 from "@/static/img/jiankong/31.png"
	import img32 from "@/static/img/jiankong/32.png"
	import img33 from "@/static/img/jiankong/33.png"
	import img44 from "@/static/img/jiankong/44.png"
	import img45 from "@/static/img/jiankong/45.png"
	import img46 from "@/static/img/jiankong/46.png"
	import img47 from "@/static/img/jiankong/47.png"
	import img48 from "@/static/img/jiankong/48.png"
	import img49 from "@/static/img/jiankong/49.png"
	import img50 from "@/static/img/jiankong/50.png"
	import img74 from "@/static/img/jiankong/74.png"
	// 引入 布局选中的图片
	import img21 from "@/static/img/jiankong/21.png"
	import img75 from "@/static/img/jiankong/75.png"
	import img76 from "@/static/img/jiankong/76.png"
	import img77 from "@/static/img/jiankong/77.png"
	import img78 from "@/static/img/jiankong/78.png"
	import img79 from "@/static/img/jiankong/79.png"
	import img80 from "@/static/img/jiankong/80.png"
	import img81 from "@/static/img/jiankong/81.png"
	import img82 from "@/static/img/jiankong/82.png"
	import img83 from "@/static/img/jiankong/83.png"
	import img84 from "@/static/img/jiankong/84.png"
	import img85 from "@/static/img/jiankong/85.png"
	import img86 from "@/static/img/jiankong/86.png"
	import img87 from "@/static/img/jiankong/87.png"
	import img88 from "@/static/img/jiankong/88.png"
	import img89 from "@/static/img/jiankong/89.png"
	import img90 from "@/static/img/jiankong/90.png"
	import img91 from "@/static/img/jiankong/91.png"
	import img92 from "@/static/img/jiankong/92.png"
	import img93 from "@/static/img/jiankong/93.png"
	import img94 from "@/static/img/jiankong/94.png"
	import img95 from "@/static/img/jiankong/95.png"

	import spItem from "@/components/lk/sp/index.vue"
	import {
		lkrequest,
		lkfetch,

	} from '../../js/lk/request.js'
	import voiceIntercomService from '../../js/lk/VoiceIntercomService.js'
	export default {
		components: {
			spItem
		},
		data() {
			return {
				value1: 0,
				dataSource: [],
				tabList: [],
				he: "",
				hhg: "",
				tindex: 0,
				currentKey: '',
				conLeft: true,
				ScreenStatus: 8,
				fullScreenFlag: false,
				xxFlag: false,
				plugId: '',
				oWebControl: null,
				addCollectionFalg: false,
				turningFalg: false,
				value: '',
				splitScreenStatus: 1,
				screenSetFlag: false,
				screenSetList: [{
						icon: img74,
						text: '1分屏',
						sta: 1,
						icon1: img21,
						chuangKou: 1
					},
					{
						icon: img22,
						text: '4分屏',
						sta: 2,
						icon1: img75,
						chuangKou: 4
					},
					{
						icon: img23,
						text: '6分屏',
						sta: 3,
						icon1: img76,
						chuangKou: 6
					},
					{
						icon: img24,
						text: '8分屏',
						sta: 4,
						icon1: img77,
						chuangKou: 8
					},
					{
						icon: img25,
						text: '9分屏',
						sta: 5,
						icon1: img78,
						chuangKou: 9
					},
					{
						icon: img26,
						text: '13分屏',
						sta: 6,
						icon1: img79,
						chuangKou: 13
					},
					{
						icon: img30,
						text: '15分屏',
						sta: 7,
						icon1: img80,
						chuangKou: 15
					},
					{
						icon: img27,
						text: '16分屏',
						sta: 8,
						icon1: img81,
						chuangKou: 16
					},
					{
						icon: img28,
						text: '20分屏',
						sta: 9,
						icon1: img82,
						chuangKou: 20
					},
					{
						icon: img29,
						text: '25分屏',
						sta: 10,
						icon1: img83,
						chuangKou: 25
					},
					{
						icon: img31,
						text: '32分屏',
						sta: 11,
						icon1: img84,
						chuangKou: 32
					},
					{
						icon: img32,
						text: '36分屏',
						sta: 12,
						icon1: img85,
						chuangKou: 36
					},
					{
						icon: img33,
						text: '64分屏',
						sta: 13,
						icon1: img86,
						chuangKou: 64
					}
				],
				screenSetList2: [{
						icon: img44,
						text: '4分屏',
						sta: 14,
						icon1: img87,
						chuangKou: 4
					},
					{
						icon: img45,
						text: '6分屏',
						sta: 15,
						icon1: img88,
						chuangKou: 6
					},
					{
						icon: img46,
						text: '7分屏',
						sta: 16,
						icon1: img89,
						chuangKou: 7
					},
					{
						icon: img47,
						text: '9分屏',
						sta: 17,
						icon1: img90,
						chuangKou: 9
					},
					{
						icon: img48,
						text: '12分屏',
						sta: 18,
						icon1: img91,
						chuangKou: 12
					},
					{
						icon: img30,
						text: '15分屏',
						sta: 19,
						icon1: img92,
						chuangKou: 15
					},
					{
						icon: img27,
						text: '16分屏',
						sta: 20,
						icon1: img81,
						chuangKou: 16
					},
					{
						icon: img28,
						text: '20分屏',
						sta: 21,
						icon1: img82,
						chuangKou: 20
					},
					{
						icon: img49,
						text: '24分屏',
						sta: 22,
						icon1: img94,
						chuangKou: 24
					},
					{
						icon: img32,
						text: '36分屏',
						sta: 23,
						icon1: img85,
						chuangKou: 36
					},
					{
						icon: img50,
						text: '48分屏',
						sta: 24,
						icon1: img95,
						chuangKou: 48
					},
				],
				shouchangList: [],
				clickCount: 0,
				timer: null,
				shouChangId: null,
				tabIndex: 0,
				shiPingLiuList: [],
				itemIndex: 0,
				buChang: 1, //云台控制步长
				presetFalg: false,
				setGuardFalg: false,
				value2: 0,
				favoritesList: [], //点击收藏或创建收藏夹的列表 
				cruiseFalg: false,
				shouCangItem: {}, //收藏
				danFenPing: false,
				leftTopIndex: 0, //左上角 组织跟通道
				searchName: '', //设备通道输入框
				zhuZhiId: null, //当前选中的分组
				tongDaoItem: {}, //列表点击... 通道赋值
				zhuaTuTanChuang: false, //抓图弹窗
				zhuaTuTanChuangInfo: {}, //抓图弹窗的内容
				user: {},
				screenshotReasonList: [], //抓图原因字典
				screenshotReasonValue: '',
				zhuaTuBeiZhu: '', //抓图弹窗的备注
				sliderValue1: 0, // 视频参数
				sliderValue2: 0, // 视频参数
				sliderValue3: 0, // 视频参数
				sliderValue4: 0, // 视频参数
				sliderValue5: 0, // 视频参数
				yuZhiDianName: '',
				yuZhiDianList: [], //预置点列表
				yuZhiDianList1: [], //预置点下拉列表
				yuZhiDianListIten: {}, //点击预置点列表的一项
				yuZhiDianListIten1: {}, //点击预置点下拉列表的一项
				yuZhiDianListIten2: {}, //点击预置点下拉列表的一项
				kanShouName: '',
				kanShouSta: false,
				ziDongGuiWeiTime: '',
				xunHangMingCheng: '',
				xunHangList: [],
				xunHangList1: [],
				xunHangXuanZhong: '',
				checkInfo: {}, //检查云台是否锁定
				bianJiXunHang: false,
				deviceName: '',
				kanShouDianInfo: {},
				planList: [],
				planListItem: '',
				planListItem1: '',
				planInfo: {},
				timers: [], // 用于存储每个窗口的定时器
				windowStates: {}, // 存储每个窗口的轮巡状态
				windowTimers: {}, // 存储每个窗口的定时器
				pollStayTime: 20,
				chuangKouShuLiangList: [],
				chuangKou: '',
				yunTaiYiDongIndex: '',
				suoDingFalg: false,
				allnum:0
			}
		},
		onReady() {
			uni.onWindowResize((res) => {
				this.hhg = res.size.windowHeight - 55
			});
		},
		onShow() {
			if (flutter) {
				flutter.call('setActionBar', {
					type: 'back',
					title: "实时监控",
					isWhite: true,
					onDownloads: "",
					onSettings: '',
					onBack: 'handleBack()',
					onClose: 'handleClickclose()'
				}, (result, error) => {})
			}

			window.handleBack = () => {
				this.back()
			}
			window.handleClickclose = () => {
				uni.$emit('exitclose')
				this.$refs.showtishi.show()
			}
		},
		mounted() {
			for (let i = 0; i < 64; i++) {
				this.shiPingLiuList.push({
					index: i
				})
			}
			this.hhg = this.wheight - 55
			// this.$refs.uphuiyi.open()
			// 
			this.user = uni.getStorageSync('user').user
			// 设备列表
			this.getDevicesList()
			// 收藏夹列表
			this.getFavoritesList()
			// 获取轮巡任务
			this.getplanList()
			// 
			document.addEventListener('click', this.handleClickOutside);

			// 监听全屏ESC退出
			document.addEventListener('keydown', this.handleKeyDown);
			// 添加右键点击事件监听
			document.addEventListener('contextmenu', this.handleRightClick);

			// 抓图的字典列表
			this.http(`/system/dict/data/type/screenshot_reason`).then(res => {
				let arr = []
				res.data.forEach(item => {
					arr.push({
						label: item.dictLabel,
						value: item.dictValue
					})
				})
				this.screenshotReasonList = arr
			})
		},
		beforeDestroy() {
			// 移除键盘事件监听
			document.removeEventListener('click', this.handleClickOutside);
			// 移除右键点击事件监听
			document.removeEventListener('contextmenu', this.handleRightClick);
			this.stop();
		},
		methods: {
			traverseTree(node, type) {
				node.map(item => {
					if (item.children.length) {
						item.children.map(k=>{
							if(k.online_status==1){
								this.allnum++
							}
						})
					}
					if (item.children && item.children.length) {
						this.traverseTree(item.children, type)
					}
				})
			},
			getDevicesList() {
				// 设备列表
				this.dataSource = []
				this.http('/v1/organization/tree/list', {
					sourceType: 1,
					searchName: this.searchName,
					searchType: this.leftTopIndex + 1
				}).then(res => {
					this.dataSource = res.data
					
					this.traverseTree(res.data)
					console.log(this.allnum,"jj")
				})
			},
			leftTopTabClick(index) {
				// 点击左上角 组织跟通道
				this.leftTopIndex = index
			},
			taptab(index) {
				this.tindex = index
			},
			nodeClick(e) {
				if (e.online_status == 1 || e.onlineStatus == 1) {
					this.currentKey = e.id
				} else {
					this.zhuZhiId = e.id
				}
			},
			// 收藏夹列表
			getFavoritesList() {
				this.http('/v1/favorites/list', {
					deviceName: this.deviceName
				}).then(res => {
					this.shouchangList = res.data
					this.shouchangList.forEach(item => {
						item.falg = false
						this.getShouCangJiaListSetFn(item)
					})
				})
			},
			// 获取轮巡任务计划
			getplanList() {
				this.planInfo = {}
				this.planList = []
				this.http('/v1/polling/plan/list').then(res => {
					res.data.forEach(item => {
						if (item.status == 1) {
							this.planInfo = item
							this.planListItem = item.id

							this.http('/v1/polling/plan/detail', {
								id: item.id
							}).then(res => {
								for (const key in res.data.windowSerialChannels) {
									if (res.data.windowSerialChannels.hasOwnProperty(
											key)) { // 过滤掉原型链上的属性
										this.lunXunShiPing(key, res.data.windowSerialChannels[key])
									}
								}
								this.itemIndex = 0
								this.screenSetList.forEach(item => {
									if (res.data.pollWindowNum == item.chuangKou) {
										this.splitScreenStatus = item.sta
									}
								})
							})

						}
						this.planList.push({
							label: item.pollPlanName,
							value: item.id,
							item
						})
					})
				})
			},
			kaiShiLunXun() {
				if (!this.planListItem) {
					return ElMessage.error('请选择轮巡任务')
				}
				this.http('/v1/polling/plan/status/update', {
					id: this.planListItem,
					status: this.planInfo.id ? 0 : 1
				}, 'POST').then(res => {
					ElMessage({
						message: '操作成功',
						type: 'success',
						plain: true,
					})
					this.planInfo = {}
					this.planList = []
					this.http('/v1/polling/plan/list').then(res => {
						res.data.forEach(item => {
							if (item.status == 1) {
								this.planInfo = item
								this.planListItem = item.id
							}
							this.planList.push({
								label: item.pollPlanName,
								value: item.id,
								item
							})
						})
						if (this.planInfo.id) {
							let info = {}
							this.planList.forEach(item => {
								if (item.value == this.planListItem) {
									info = item.item
								}
							})
							this.http('/v1/polling/plan/detail', {
								id: info.id
							}).then(res => {
								for (const key in res.data.windowSerialChannels) {
									if (res.data.windowSerialChannels.hasOwnProperty(
											key)) { // 过滤掉原型链上的属性
										this.lunXunShiPing(key, res.data.windowSerialChannels[key])
									}
								}
							})
							this.itemIndex = 0
							this.screenSetList.forEach(item => {
								if (info.pollWindowNum == item.chuangKou) {
									this.splitScreenStatus = item.sta
								}
							})
						} else {
							this.stop()
						}
					})

				})
			},
			lunXunShiPing(index, items) {
				// 先清除该窗口已有的定时器
				this.clearWindowTimer(index);

				// 初始化窗口状态
				this.windowStates[index] = {
					currentIndex: 0,
					items: items
				};

				// 开始播放第一个视频
				this.playNextVideo(index);
			},
			clearWindowTimer(windowIndex) {
				if (this.windowTimers[windowIndex]) {
					clearTimeout(this.windowTimers[windowIndex]);
					this.$set(this.windowTimers, windowIndex, null);
				}
			},
			playNextVideo(windowIndex) {
				// 如果已停止，则不再继续
				if (!this.planInfo.id) return;

				const windowState = this.windowStates[windowIndex];
				if (!windowState || !windowState.items || windowState.items.length === 0) return;
				console.log(windowState)
				// 获取当前视频
				const currentItem = windowState.items[windowState.currentIndex];

				// 播放视频
				this.lunXunChuangKouFn(windowIndex, currentItem);

				// 设置下一个视频的定时器
				const timer = setTimeout(() => {
					// 更新索引（循环）
					windowState.currentIndex = (windowState.currentIndex + 1) % windowState.items.length;
					this.playNextVideo(windowIndex);
				}, currentItem.channelStayTime * 1000);

				// 存储定时器引用
				this.$set(this.windowTimers, windowIndex, timer);
			},
			lunXunChuangKouFn(index, item) {
				console.log(11111, item)
				// index 是窗口 item是请求参数
				lkrequest(`devices/${item.device.deviceCode}/channels/${item.device.id}/getVideoRealtimeUrl`, {
						netType: 2,
						protocolType: 9,
						streamType: 1
					}, 'post', 'getVideoRealtimeUrl')
					.then(res => {
						res.data.name = item.name
						res.data.index = index - 1
						res.data.id = item.device.id
						res.data.device_code = item.device.deviceCode
						res.data.list = item

						res.data.is_support_ptz = item.device.isSupportPTZ

						if (process.env.NODE_ENV !== 'development') {
							res.data.streamUrl = res.data.streamUrl.replace("http://", "https://").replace(
								"121.89.195.116:9980", "lov.wexiang.vip/monitort"); // 替换域名部分
						}
						if (item.preparePointId) {
							// 设置了预置点 就转到就好了
							lkrequest(
									`preset/devices/${item.device.deviceCode}/channels/${item.device.id}/doControlPreset`, {
										presetId: item.preparePointId
									},
									'post', 'doControlPreset', this.shiPingLiuList[index - 1].token)
								.then(res => {

								})
						}

						// 支持云台 获取云台控制权
						if (res.data.is_support_ptz == 1) {
							// 支持云台 获取云台控制权
							if (this.shiPingLiuList[index - 1].token) {
								lkrequest(
										`monitor/devices/${item.device.deviceCode}/channels/${item.device.id}/ptz/1/doLockOrReleasePtz`, {
											duration: 10,
											token: this.shiPingLiuList[index - 1].token
										}, 'post', 'doLockOrReleasePtz')
									.then(res1 => {
										console.log(res)
										lkrequest(
												`monitor/devices/${item.device.deviceCode}/channels/${item.device.id}/ptz/0/doLockOrReleasePtz`, {
													duration: 10,
													token: ''
												}, 'post', 'doLockOrReleasePtz')
											.then(res1 => {
												res.data.token = res1.data.token
												this.shiPingLiuList[index - 1] = {}
												this.shiPingLiuList[index - 1] = res.data
												this.getSliderVluer()
											})
									})
							} else {
								lkrequest(
										`monitor/devices/${item.device.deviceCode}/channels/${item.device.id}/ptz/0/doLockOrReleasePtz`, {
											duration: 10,
											token: ''
										}, 'post', 'doLockOrReleasePtz')
									.then(res1 => {
										res.data.token = res1.data.token
										this.shiPingLiuList[index - 1] = {}
										this.shiPingLiuList[index - 1] = res.data
										this.getSliderVluer()
									})

							}
						} else {
							this.shiPingLiuList[index - 1] = {}
							this.shiPingLiuList[index - 1] = res.data
							this.getSliderVluer()
						}
					})
			},
			stop() {

				// 清除所有窗口的定时器
				Object.keys(this.windowTimers).forEach(windowIndex => {
					this.clearWindowTimer(windowIndex);
				});

				// 同时清除之前的方式（兼容旧代码）
				this.timers.forEach(timer => clearTimeout(timer));
				this.timers = [];

				// 清除倒计时interval（如果有）
				Object.keys(this.windowStates).forEach(windowIndex => {
					const state = this.windowStates[windowIndex];
					if (state && state.interval) {
						clearInterval(state.interval);
						state.interval = null;
					}
				});
			},
			getShouCangJiaListSetFn(item) {
				if (item.children.length) {
					item.children.forEach(i => {
						i.falg = false
						this.getShouCangJiaListSetFn(i)
					})
				}
				if (item.devices.length) {
					item.devices.forEach(item1 => {
						item.children.push(item1)
					})
				}
			},
			// 点击收藏夹
			shouChangItemClick(item) {
				this.clickCount += 1;
				if (this.clickCount === 1) {
					this.timer = setTimeout(() => {
						item.falg = !item.falg
						this.clickCount = 0;
						this.shouChangId = null
					}, 250); // 自定义间隔时间（如 250ms）
				} else if (this.clickCount === 2) {
					this.shouChangId = item.id
					clearTimeout(this.timer);
					this.clickCount = 0;
				}
			},
			// 收藏夹修改名字
			inputBlur(item) {
				if (item.favoritesName) {
					this.http('/v1/favorites/update', {
						id: this.shouChangId,
						favoritesName: item.favoritesName
					}, 'POST').then(res => {
						this.getFavoritesList()
						this.shouChangId = null
					})
				} else {
					this.getFavoritesList()
					this.shouChangId = ''
					ElMessage.error('请输入分组名字')
				}
			},
			mouseEnter(e) {
				this.currentKey = e.id
			},
			ziyuanShuClick(data) {
				this.clickCount += 1;
				if (this.clickCount === 1) {
					this.timer = setTimeout(() => {
						this.clickCount = 0;
					}, 250); // 自定义间隔时间（如 250ms）
				} else if (this.clickCount === 2) {
					if (data.online_status == 1 || data.onlineStatus == 1) {
						lkrequest(`devices/${data.device_code||data.deviceCode}/channels/${data.id}/getVideoRealtimeUrl`, {
								netType: 2,
								protocolType: 9,
								streamType: 1
							}, 'post', 'getVideoRealtimeUrl')
							.then(res => {
								res.data.name = data.name
								res.data.index = this.itemIndex
								res.data.id = data.id
								res.data.device_code = data.device_code || data.deviceCode
								res.data.is_support_ptz = data.is_support_ptz || data.isSupportPTZ

								if (process.env.NODE_ENV !== 'development') {
									res.data.streamUrl = res.data.streamUrl.replace("http://", "https://").replace(
										"121.89.195.116:9980", "lov.wexiang.vip/monitort"); // 替换域名部分
								}

								this.getYuZhiDianList(res.data.device_code, data.id)
								if (res.data.is_support_ptz == 1) {
									// 支持云台 获取云台控制权
									if (this.shiPingLiuList[this.itemIndex].token) {
										lkrequest(
												`monitor/devices/${res.data.device_code}/channels/${data.id}/ptz/1/doLockOrReleasePtz`, {
													duration: 10,
													token: this.shiPingLiuList[this.itemIndex].token
												}, 'post', 'doLockOrReleasePtz')
											.then(res1 => {
												console.log(res)
												lkrequest(
														`monitor/devices/${data.device_code}/channels/${data.id}/ptz/0/doLockOrReleasePtz`, {
															duration: 10,
															token: ''
														}, 'post', 'doLockOrReleasePtz')
													.then(res1 => {
														res.data.token = res1.data.token
														this.shiPingLiuList[this.itemIndex] = {}
														this.shiPingLiuList[this.itemIndex] = res.data
														this.getSliderVluer()
													})
											})
									} else {
										lkrequest(
												`monitor/devices/${res.data.device_code}/channels/${data.id}/ptz/0/doLockOrReleasePtz`, {
													duration: 10,
													token: ''
												}, 'post', 'doLockOrReleasePtz')
											.then(res1 => {
												res.data.token = res1.data.token
												this.shiPingLiuList[this.itemIndex] = {}
												this.shiPingLiuList[this.itemIndex] = res.data
												this.getSliderVluer()
											})

									}
								} else {
									this.shiPingLiuList[this.itemIndex] = {}
									this.shiPingLiuList[this.itemIndex] = res.data
									this.getSliderVluer()
								}

							})
						if (this.planInfo.id) {
							this.http('/v1/polling/plan/status/update', {
								id: this.planListItem,
								status: this.planInfo.id ? 0 : 1
							}, 'POST').then(res => {
								ElMessage({
									message: '轮巡暂停！',
									type: 'success',
									plain: true,
								})
								this.getplanList()
								this.stop()
							})
						}
					}
					clearTimeout(this.timer);
					this.clickCount = 0;
				}
			},
			// 处理布局弹窗点击外面隐藏
			handleClickOutside(event) {
				if (this.screenSetFlag) {
					const modalContent = this.$refs.LayoutPop.$el;
					if (modalContent && !modalContent.contains(event.target)) {
						this.screenSetFlag = false;
					}
				}
				if (this.xxFlag) {
					const modalContent = this.$refs.xuanXiang.$el;

					if (modalContent && !modalContent.contains(event.target)) {
						this.xxFlag = false;
					}
				}
			},
			// ESC退出全屏
			handleKeyDown() {
				if (event.key === 'Escape' || event.keyCode === 27) {
					if (this.fullScreenFlag) {
						this.fullScreenFlag = false
						flutter.call('setFullScreen', {
							isFullScreen: false
						}, (result, error) => {
							console.log('ESC 键被按下了1', error);
							console.log('ESC 键被按下了2', result);
						});
					}
					console.log('ESC 键被按下了3');
					// 在这里添加你的逻辑，例如关闭弹窗
				}
			},
			// 处理右键点击事件
			handleRightClick(event) {
				event.preventDefault(); // 阻止默认的右键菜单
				if (this.fullScreenFlag) {
					this.fullScreenFlag = false
					flutter.call('setFullScreen', {
						isFullScreen: false
					}, (result, error) => {

					});
				}

				// 在这里添加你的逻辑
			},
			//单个视频点击❌
			chaHaoClick(data) {
				this.shiPingLiuList[data.index] = {}
			},
			// 右键后被点击的回调
			handleMenuItemClick(data) {

				if (data.index == 1) {
					// 关闭单视频
					this.shiPingLiuList[data.item.index] = {}
				}
				if (data.index == 2) {
					// 关闭所有视频
					this.guanBiSuoYouShiPing()
				}
				if (data.index == 3) {
					// 关闭所有视频
					this.kaiFaZhong()
				}
				if (data.index == 8) {
					// 视频全屏
					this.quanPingFn()
				}
			},
			sheBeiJiaRuShouChangJia(data) {
				this.addCollectionFalg = true
				this.zhuZhiId = null
				this.tongDaoItem = data
				this.getFavoritesList()
			},
			jiaRuTongDao(data) {
				this.turningFalg = true
				this.tongDaoItem = data
			},
			// 全屏
			quanPingFn() {
				this.fullScreenFlag = true
				flutter.call('setFullScreen', {
					isFullScreen: true
				}, (result, error) => {

				});
			},
			//在多分屏点击窗口
			smallWindowItemClick(index) {
				this.clickCount += 1;
				this.itemIndex = index
				if (this.clickCount === 1) {
					this.timer = setTimeout(() => {
						this.getSliderVluer()
						this.clickCount = 0;
					}, 250); // 自定义间隔时间（如 250ms）
				} else if (this.clickCount === 2) {
					if (this.shiPingLiuList[index].streamUrl) {
						this.getSliderVluer()
						this.danFenPing = true
					}
					clearTimeout(this.timer);
					this.clickCount = 0;
				}
			},
			danFenPingClick() {
				// 多分屏双击窗口到一分屏后在双击窗口回到之前的多分屏
				this.clickCount += 1;
				if (this.clickCount === 1) {
					this.timer = setTimeout(() => {
						this.clickCount = 0;
					}, 250); // 自定义间隔时间（如 250ms）
				} else if (this.clickCount === 2) {
					this.danFenPing = false
					clearTimeout(this.timer);
					this.clickCount = 0;
				}
			},
			chuangJianShouChangJia() {
				// 添加收藏弹窗 点击创建收藏夹
				if (this.zhuZhiId) {
					this.http('/v1/favorites/add', {
						id: this.zhuZhiId,
						favoritesName: this.xunHuanChuLiFn(this.shouchangList),
					}, 'POST').then(res => {
						this.getFavoritesList()
					})
				} else {
					ElMessage.error('请选中分组后在创建收藏夹')
				}
			},
			xunHuanChuLiFn(list) {
				for (let i = 0; i < list.length; i++) {
					const item = list[i];
					if (this.zhuZhiId == item.id) {
						// 如果当前项匹配，返回新的文件夹名称
						return this.getNewFolderName(item.children);
					} else if (item.children) {
						// 递归处理子节点
						const name = this.xunHuanChuLiFn(item.children);
						if (name) {
							// 如果递归调用返回了非空值，直接返回
							return name;
						}
					}
				}
				// 如果没有找到匹配项，返回 undefined
				return undefined;
			},
			getNewFolderName(folders) {

				let baseName = "新建文件夹";
				let folderName = baseName;
				let counter = 0;
				// 检查是否存在同名文件夹
				while (folders.some(folder => folder.favoritesName === folderName)) {
					counter++;
					folderName = `${baseName}${counter}`;
				}
				return folderName;
			},
			quanDingTianJiaShouCang() {
				// 收藏弹窗点击确认
				this.http('/v1/favorites/add', {
					id: this.zhuZhiId,
					device: this.tongDaoItem
				}, 'POST').then(res => {
					this.addCollectionFalg = false
					ElMessage({
						message: '添加成功',
						type: 'success',
						plain: true,
					})
					this.getFavoritesList()
				})
			},
			shanChuShouCangJia() {
				// 删除收藏夹
				if (this.zhuZhiId) {
					this.http('/v1/favorites/delete', {
						id: this.zhuZhiId,
						deleteType: 0
					}, 'POST').then(res => {
						this.zhuZhiId = null
						ElMessage({
							message: '删除成功',
							type: 'success',
							plain: true,
						})
						this.getFavoritesList()
					})
				} else {
					ElMessage.error('请在收藏夹列表中选择需要删除的分组！')
				}
			},
			shanChuSheBei(data) {
				// 删除收藏夹里面的通道
				console.log(data)
				this.http('/v1/favorites/delete', {
					id: data.rowId,
					deleteType: 1
				}, 'POST').then(res => {
					ElMessage({
						message: '删除成功',
						type: 'success',
						plain: true,
					})
					this.getFavoritesList()
				})

			},
			onCaptureFinish(e) {
				// 抓图操作
				this.zhuaTuTanChuang = true
				this.zhuaTuTanChuangInfo = e
			},
			screenshotReasonChange(e) {
				// 选择抓图原因
				this.screenshotReasonValue = e
			},
			// 抓图保存
			baoCunZhuaTu() {
				if (!this.screenshotReasonValue) {
					return ElMessage.error('请选择抓图原因！')
				}
				if (!this.zhuaTuBeiZhu) {
					return ElMessage.error('请输入抓图备注！')
				}

				if (this.zhuaTuTanChuangInfo.list.length == 1) {
					// 单次抓图
					//先上传图片后带上文件id去请求保存
					const file = this.base64ToFile(this.zhuaTuTanChuangInfo.list[0].base64, 'example.png', 'image/png');
					const formData = new FormData();
					formData.append('file', file);
					// 发送请求
					lkfetch('/system/file/upload', formData, 'POST').then(res => {
						let fileId = res.data.fileId
						this.http('/resource/add', {
							deviceCode: this.zhuaTuTanChuangInfo.device_code,
							channelCode: this.zhuaTuTanChuangInfo.id,
							type: 0,
							fileId,
							fileIds: null,
							reason: this.screenshotReasonValue,
							remark: this.zhuaTuBeiZhu,
						}, 'POST').then(res => {
							ElMessage({
								message: '抓图成功',
								type: 'success',
								plain: true,
							})
							this.zhuaTuTanChuang = false

						})
					})
				}

			},
			base64ToBlob(base64, mimeType) {
				const byteCharacters = atob(base64.split(',')[1]); // 解码 Base64 数据
				const byteNumbers = new Uint8Array(byteCharacters.length);

				for (let i = 0; i < byteCharacters.length; i++) {
					byteNumbers[i] = byteCharacters.charCodeAt(i);
				}

				return new Blob([byteNumbers], {
					type: mimeType
				});
			},
			base64ToFile(base64, fileName, mimeType) {
				const blob = this.base64ToBlob(base64, mimeType);
				return new File([blob], fileName, {
					type: mimeType
				});
			},
			// 查询该窗口下的视频参数 
			getSliderVluer() {
				if (this.shiPingLiuList[this.itemIndex].is_support_ptz == 1) {
					this.tabList = [{
						name: '云台控制',
						index: 1
					}, {
						name: '预置点',
						index: 2
					}, {
						name: '巡航',
						index: 3
					}, {
						name: '视频参数',
						index: 4
					}]
					this.chaXunXunHangList()
					this.http('/v1/ptzs/check', {
						deviceCode: this.shiPingLiuList[this.itemIndex].device_code,
						channelCode: this.shiPingLiuList[this.itemIndex].id,
					}, 'GET').then(res => {
						this.checkInfo = res.data
					})
					this.queryGuardList()
				} else {
					this.tabList = []
				}
				if (this.shiPingLiuList[this.itemIndex].streamUrl) {
					lkrequest(
							`devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryVideoParam`, {
								type: 1
							}, 'post', 'queryVideoParam')
						.then(res => {
							this.sliderValue1 = res.data.value
						})
					lkrequest(
							`devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryVideoParam`, {
								type: 2
							}, 'post', 'queryVideoParam')
						.then(res => {
							this.sliderValue2 = res.data.value
						})
					lkrequest(
							`devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryVideoParam`, {
								type: 3
							}, 'post', 'queryVideoParam')
						.then(res => {
							this.sliderValue3 = res.data.value
						})
					lkrequest(
							`devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryVideoParam`, {
								type: 4
							}, 'post', 'queryVideoParam')
						.then(res => {
							this.sliderValue4 = res.data.value
						})
					lkrequest(
							`devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryVideoParam`, {
								type: 5
							}, 'post', 'queryVideoParam')
						.then(res => {
							this.sliderValue5 = res.data.value
						})
				}
			},
			// 修改视频参数
			sliderChange(e) {

				if (this.shiPingLiuList[this.itemIndex].streamUrl) {
					lkrequest(
							`/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/setVideoParam`, {
								type: e,
								value: e == 1 ? this.sliderValue1 : e == 2 ? this.sliderValue2 : e == 3 ? this
									.sliderValue3 : e == 4 ? this.sliderValue4 : this.sliderValue5
							}, 'post', 'setVideoParam')
						.then(res => {
							ElMessage({
								message: '修改成功',
								type: 'success',
								plain: true,
							})
						})
				} else {
					return ElMessage.error('该窗口下没有视频，设置失败。')
				}
			},
			guanBiSuoYouShiPing() {
				// 关闭所有视频
				this.shiPingLiuList = []
				for (let i = 0; i < 64; i++) {
					this.shiPingLiuList.push({
						index: i
					})
				}
			},
			// 云台控制的操作
			yunTaiYiDong(index) {
				console.log(index)
				if (this.shiPingLiuList[this.itemIndex].streamUrl) {
					if (this.shiPingLiuList[this.itemIndex].is_support_ptz == 1) {
						if (this.checkInfo.canOperate == 1) {
							this.yunTaiYiDongIndex = index
							setTimeout(() => {
								this.yunTaiYiDongIndex = ''
							}, 500)
							if (index < 9) {
								lkrequest(
										`plat/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/ptz/doPtzCmds`, {
											operType: index,
											operContent: 1,
											step: this.buChang
										}, 'post', 'doPtzCmds', this.shiPingLiuList[this.itemIndex].token)
									.then(res => {
										//操作成功后立马在调用一次结束 不然会一直重复的去一个方向
										lkrequest(
												`plat/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/ptz/doPtzCmds`, {
													operType: index,
													operContent: 0,
													step: this.buChang
												}, 'post', 'doPtzCmds', this.shiPingLiuList[this.itemIndex].token)
											.then(res => {

											})
									})
							} else {
								lkrequest(
										`plat/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/camera/doCameraFocusOrZoom`, {
											operType: index,
											operContent: 1,
											step: this.buChang
										}, 'post', 'doCameraFocusOrZoom', this.shiPingLiuList[this.itemIndex].token)
									.then(res => {
										lkrequest(
												`plat/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/camera/doCameraFocusOrZoom`, {
													operType: index,
													operContent: 0,
													step: this.buChang
												}, 'post', 'doCameraFocusOrZoom', this.shiPingLiuList[this.itemIndex]
												.token
											)
											.then(res => {})
									})
							}
						} else {
							this.suoDingFn()
						}
					} else {
						return ElMessage.error('该设备不支持云台控制！')
					}
				}
			},
			presetStaFalg() {
				// 打开团床
				if (this.shiPingLiuList[this.itemIndex].streamUrl) {
					this.presetFalg = true
				} else {
					return ElMessage.error('该窗口下没有设备，请先添加设备！')
				}

			},
			getYuZhiDianList(device_code, id) {
				// 获取预置点列表
				lkrequest(
						`preset/devices/${device_code}/channels/${id}/queryPresetList`, {},
						'post', 'queryPresetList')
					.then(res => {
						let arr = []
						res.data.forEach(item => {
							item.falg = false
							item.staySeconds = ''
							arr.push({
								label: item.presetName,
								value: item.presetId,
								item,
							})
						})
						this.yuZhiDianList1 = arr
						this.yuZhiDianList = res.data
					})
			},
			tianJiaXunHang() {
				if (this.checkInfo.canOperate == 1) {
					this.getYuZhiDianList(this.shiPingLiuList[this.itemIndex].device_code, this.shiPingLiuList[
						this
						.itemIndex].id)
					this.xunHangMingCheng = ''
					this.cruiseFalg = true
				} else {
					this.suoDingFn()
				}

			},
			addYuZhiDinClick() {
				// 新增预置点
				if (!this.yuZhiDianName) {
					return ElMessage.error('请输入预置点名称')
				}
				if (this.yuZhiDianListIten.presetId) {
					//修改预置点
					lkrequest(
							`preset/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/updatePresetInfo`, {
								presetName: this.yuZhiDianName,
								presetId: this.yuZhiDianListIten.presetId
							}, 'post', 'addCameraPreset')
						.then(res => {
							this.presetFalg = false
							this.yuZhiDianName = ''
							this.yuZhiDianListIten = {}
							this.getYuZhiDianList(this.shiPingLiuList[this.itemIndex].device_code, this.shiPingLiuList[
								this
								.itemIndex].id)
							ElMessage({
								message: '编辑成功！',
								type: 'success',
								plain: true,
							})
						})
				} else {
					//新增预置点
					lkrequest(
							`preset/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/preset/addCameraPreset`, {
								presetName: this.yuZhiDianName
							}, 'post', 'addCameraPreset')
						.then(res => {
							this.presetFalg = false
							this.yuZhiDianName = ''
							this.getYuZhiDianList(this.shiPingLiuList[this.itemIndex].device_code, this.shiPingLiuList[
								this
								.itemIndex].id)
							ElMessage({
								message: '添加成功！',
								type: 'success',
								plain: true,
							})
						})
				}

			},
			shanChuYuZhiDian(item) {
				// 删除列表的预置点
				if (this.checkInfo.canOperate == 1) {
					lkrequest(
							`preset/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/preset/${item.presetId}/delCameraPreset`, {},
							'post', 'delCameraPreset')
						.then(res => {
							ElMessage({
								message: '删除成功',
								type: 'success',
								plain: true,
							})
							this.getYuZhiDianList(this.shiPingLiuList[this.itemIndex].device_code, this.shiPingLiuList[
								this
								.itemIndex].id)
						})
				} else {
					this.suoDingFn()
				}

			},
			// 编辑预置点
			bianJiYuZhiDian(item) {
				if (this.checkInfo.canOperate == 1) {
					this.yuZhiDianListIten = item
					this.yuZhiDianName = item.presetName
					this.presetFalg = true
				} else {
					this.suoDingFn()
				}
			},
			yuZhiDianXiaLaChange(e) {
				this.yuZhiDianList1.forEach(item => {
					if (item.value == e) {
						this.yuZhiDianListIten2 = item
					}
				})
			},
			yuZhiDianXiaLaChange1(e) {
				this.kanShouName = e
			},
			yuZhiDianXiaLaChange2(e) {
				this.planListItem1 = e
				this.http('/v1/polling/plan/detail', {
					id: e
				}).then(res => {
					this.chuangKouShuLiangList = []
					for (let i = 0; i < res.data.pollWindowNum; i++) {
						this.chuangKouShuLiangList.push({
							label: i + 1,
							value: i + 1,
						}, )
					}
					console.log(this.chuangKouShuLiangList)
				})
			},
			yuZhiDianXiaLaChange3(e) {
				this.chuangKou = e
			},
			zhuanDaoYuZhiDian() {
				// 转到对于的预置点
				if (this.checkInfo.canOperate == 1) {
					if (this.yuZhiDianListIten2.value) {
						lkrequest(
								`preset/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/doControlPreset`, {
									presetId: this.yuZhiDianListIten2.value
								},
								'post', 'doControlPreset', this.shiPingLiuList[this.itemIndex].token)
							.then(res => {
								ElMessage({
									message: '操作成功',
									type: 'success',
									plain: true,
								})
							})
					} else {
						return ElMessage.error('请选择预置点')
					}
				} else {
					this.suoDingFn()
				}
			},
			setKanShouDian() {
				if (this.checkInfo.canOperate == 1) {
					this.setGuardFalg = true
				} else {
					this.suoDingFn()
				}
			},
			queDingSheZhiKanShouDian() {
				// 确定设置看守点
				if (!this.ziDongGuiWeiTime) {
					return ElMessage.error('请输入自动归位时间')
				}
				if (!this.kanShouName) {
					return ElMessage.error('请输入看守位名称')
				}
				let guardName = ''
				this.yuZhiDianList1.forEach(item => {
					if (item.value == this.kanShouName) {
						guardName = item.label
					}
				})
				lkrequest(
						`guard/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/doSetGuard`, {
							guardName,
							presetId: this.kanShouName,
							staySeconds: this.ziDongGuiWeiTime,
							guardStatus: this.kanShouSta ? 1 : 0
						},
						'post', 'doSetGuard', this.shiPingLiuList[this.itemIndex].token)
					.then(res => {
						ElMessage({
							message: '设置成功',
							type: 'success',
							plain: true,
						})
						this.setGuardFalg = false
						this.queryGuardList()
					})
			},
			guanBiKanShouDian() {

				this.setGuardFalg = false
			},
			chaXunXunHangList() {
				// 查询巡航列表
				lkrequest(
						`cruise/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryPatrol`, {},
						'post', 'queryPatrol', )
					.then(res => {
						console.log(res)
						this.xunHangList = res.data
						let arr = []
						res.data.forEach((item, index) => {
							arr.push({
								label: item.patrolName,
								value: index,
								item
							})
						})
						this.xunHangList1 = arr
					})
			},
			queryGuardList() {
				// 查询看守位设置
				lkrequest(
						`guard/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryGuardList`, {},
						'post', 'queryGuardList', )
					.then(res => {
						this.kanShouDianInfo = res.data
						this.kanShouName = res.data.guardId
						this.ziDongGuiWeiTime = res.data.staySeconds
						this.kanShouSta = res.data.isStart == 1 ? true : false
						this.yuZhiDianList1.forEach(item => {
							if (item.value == res.data.guardId) {
								this.kanShouDianInfo.name = item.label
							}
						})
					})
			},
			baoCunTianJiaXunHang() {
				// 保存添加巡航
				if (!this.xunHangMingCheng) {
					return ElMessage.error('请输入巡航名称')
				}
				let noTrueFlag = true; // 假设没有 flag 为 true 的对象
				for (const item of this.yuZhiDianList) {
					if (item.falg === true) {
						noTrueFlag = false; // 如果发现 flag 为 true，则设置为 false
						break; // 提前退出循环
					}
				}
				if (noTrueFlag) {
					return ElMessage.error('请选择预置点')
				}
				let cuoItem = {}
				for (const item of this.yuZhiDianList) {
					if (item.falg === true) {
						if (!item.staySeconds) {
							cuoItem = item
							break; // 提前退出循环
						}
					}
				}
				if (cuoItem.falg) {
					return ElMessage.error(`预置点${cuoItem.presetName}请输入停留时间`)
				}
				let presets = []
				for (const item of this.yuZhiDianList) {
					if (item.falg === true) {
						presets.push({
							presetId: item.presetId,
							staySeconds: item.staySeconds,
							speed: 1,
							sort: 1
						})
					}
				}
				if (!this.bianJiXunHang) {
					lkrequest(
							`cruise/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/addCruisePatrol`, {
								patrolName: this.xunHangMingCheng,
								presets
							},
							'post', 'addCruisePatrol', )
						.then(res => {
							ElMessage({
								message: '保存成功',
								type: 'success',
								plain: true,
							})
							this.xunHangMingCheng = ''
							this.cruiseFalg = false
							this.chaXunXunHangList()
						})
				} else {
					lkrequest(
							`cruise/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/updatePatrol`, {
								patrolId: this.BianJiXunHangInfo.patrolId,
								patrolName: this.xunHangMingCheng,
								presets
							},
							'post', 'addCruisePatrol', )
						.then(res => {
							ElMessage({
								message: '编辑成功',
								type: 'success',
								plain: true,
							})
							this.xunHangMingCheng = ''
							this.cruiseFalg = false
							this.bianJiXunHang = false
							this.chaXunXunHangList()
						})
				}

			},
			xunHangXuanZhongChange(e) {
				console.log(e)
				this.xunHangXuanZhong = e
			},
			kaiShiXunHang(sta) {
				// 开始巡航
				lkrequest(
						`cruise/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/doPatrol`, {
							patrolId: this.xunHangList[this.xunHangXuanZhong].patrolId,
							patrolType: sta
						},
						'post', 'doPatrol', )
					.then(res => {
						ElMessage({
							message: sta == 1 ? '停用成功' : '启动成功',
							type: 'success',
							plain: true,
						})
						this.xunHangList[this.xunHangXuanZhong].isCruise = sta == 1 ? 0 : 1
					})
			},
			shanChuXunHangItem(item) {
				if(this.planInfo.id){
					uni.showToast({
					  title:'请先停止巡航，再进行操作',
					  icon:'none',
					  duration:2000
					})
					return ;
				}
				if (this.checkInfo.canOperate == 1) {
					// 删除巡航
					lkrequest(
							`cruise/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/delPatrol`, {
								patrolId: item.patrolId,
							},
							'post', 'delPatrol', )
						.then(res => {
							ElMessage({
								message: '删除成功',
								type: 'success',
								plain: true,
							})
							this.chaXunXunHangList()
						})
				} else {
					this.suoDingFn()
				}

			},
			bianJiXunHangFn(item) {
				console.log(item)
				if (this.checkInfo.canOperate == 1) {
					this.cruiseFalg = true
					this.bianJiXunHang = true
					this.xunHangMingCheng = item.patrolName
					this.BianJiXunHangInfo = item
					lkrequest(
							`preset/devices/${this.shiPingLiuList[this.itemIndex].device_code}/channels/${this.shiPingLiuList[this.itemIndex].id}/queryPresetList`, {},
							'post', 'queryPresetList')
						.then(res => {
							let arr = []
							res.data.forEach(item1 => {
								for (let i = 0; i < item.presets.length; i++) {
									if (item1.presetId == item.presets[i].presetId) {
										item1.falg = true
										item1.staySeconds = item.presets[i].staySeconds
									}
								}
								arr.push({
									label: item.presetName,
									value: item.presetId,
									item1,
								})
							})
							this.yuZhiDianList1 = arr
							this.yuZhiDianList = res.data
						})
				} else {
					this.suoDingFn()
				}

			},
			suoDingYunTai() {
				// 锁定云台
				this.http('/v1/ptzs/lock', {
					deviceCode: this.shiPingLiuList[this.itemIndex].device_code,
					channelCode: this.shiPingLiuList[this.itemIndex].id,
				}, 'GET').then(res => {
					ElMessage({
						message: '锁定成功',
						type: 'success',
						plain: true,
					})
					this.http('/v1/ptzs/check', {
						deviceCode: this.shiPingLiuList[this.itemIndex].device_code,
						channelCode: this.shiPingLiuList[this.itemIndex].id,
					}, 'GET').then(res => {
						this.checkInfo = res.data
					})
				})
			},
			jieSuoYunTai() {
				// 解锁云台
				this.http('/v1/ptzs/unlock', {
					deviceCode: this.shiPingLiuList[this.itemIndex].device_code,
					channelCode: this.shiPingLiuList[this.itemIndex].id,
				}, 'GET').then(res => {
					ElMessage({
						message: '解锁成功',
						type: 'success',
						plain: true,
					})
					this.http('/v1/ptzs/check', {
						deviceCode: this.shiPingLiuList[this.itemIndex].device_code,
						channelCode: this.shiPingLiuList[this.itemIndex].id,
					}, 'GET').then(res => {
						this.checkInfo = res.data
					})
				})
			},
			// 铺满窗口
			puManChuangKou() {
				let chuangKou = ''
				this.screenSetList.forEach(item => {
					if (item.sta == this.splitScreenStatus) {
						chuangKou = item.chuangKou
					}
				})
				if (chuangKou == '') {
					this.screenSetList2.forEach(item => {
						if (item.sta == this.splitScreenStatus) {
							chuangKou = item.chuangKou
						}
					})
				}
				// 拿到了目前窗口的数量 然后去循环组织树 把所有通道循环拿出来
				let arr = this.tongDaoList(this.dataSource, [])
				this.fetchInParallelButKeepOrder(arr).then(orderedResults => {
					// 这里已经请求获取到
					// 
					for (let i = 0; i < chuangKou; i++) {
						if (!this.shiPingLiuList[i].streamUrl && orderedResults.length) {
							this.shiPingLiuList[i] = orderedResults[0]
							console.log(this.shiPingLiuList[i])
							this.shiPingLiuList[i].index = i
							orderedResults.shift()
						}
					}
				});
			},
			tongDaoList(list, result = [], chuangKou) {
				list.forEach(item => {
					if (item.online_status == 1) {
						result.push(item)
					}
					if (item.children && Array.isArray(item.children)) {
						this.tongDaoList(item.children, result);
					}
				})
				return result;
			},
			async fetchInParallelButKeepOrder(idArray) {
				// 1. 创建所有请求的Promise数组
				const promises = idArray.map(item => {
					return lkrequest(
							`devices/${item.device_code || item.deviceCode}/channels/${item.id}/getVideoRealtimeUrl`, {
								netType: 2,
								protocolType: 9,
								streamType: 1
							},
							'post',
							'getVideoRealtimeUrl'
						)
						.then(res => {
							// 合并数据到响应体

							if (process.env.NODE_ENV !== 'development') {
								res.data.streamUrl = res.data.streamUrl.replace("http://", "https://")
									.replace(
										"121.89.195.116:9980", "lov.wexiang.vip/monitort"); // 替换域名部分
							}
							return {
								...res,
								data: {
									...res.data,
									name: item.name,
									id: item.id,
									device_code: item.device_code,
									is_support_ptz: item.is_support_ptz
								},

							};
						})
				});

				// 2. 并行执行所有请求
				const responses = await Promise.all(promises);
				// 3. 按原始顺序提取数据
				return responses.map(res => res.data || res.error);
			},
			// 流码切换
			liuMaClick(e) {
				lkrequest(
						`devices/${e.item.device_code||e.item.data.deviceCode}/channels/${e.item.id}/getVideoRealtimeUrl`, {
							netType: 2,
							protocolType: 9,
							streamType: e.sta
						}, 'post', 'getVideoRealtimeUrl')
					.then(res => {
						this.shiPingLiuList[e.item.index].streamUrl = ''
						this.shiPingLiuList[e.item.index].streamUrl = res.data.streamUrl
					})
			},
			kaiFaZhong() {
				ElMessage({
					message: '开发中...',
					type: 'warning',
				})
			},
			async duiJiangClick(e) {
				const item = this.shiPingLiuList[e];

				if (item.DuiJiang) {
					// 停止对讲
					await voiceIntercomService.stopVoiceIntercom(item.connectionId);
					item.DuiJiang = false;
					uni.showToast({
						title: '已关闭对讲',
						icon: 'success'
					});
					return;
				}

				uni.showLoading({
					title: '正在开启对讲...'
				});

				try {
					// 1. 获取WebSocket地址
					const res = await lkrequest(
						`plat/devices/${item.device_code||item.deviceCode}/channels/${item.id}/getAudioChannel`, {
							netType: 2,
							protocolType: 9
						},
						'post',
						'getAudioChannel'
					);

					if (!res.data.streamUrl) throw new Error('未获取到流地址');

					// 2. 建立WebSocket连接
					item.connectionId = await voiceIntercomService.startWebSocketSession(res.data.streamUrl);

					// 3. 开始音频采集（关键调用位置）
					await voiceIntercomService.startAudioCapture();

					// 4. 设置喊话状态
					voiceIntercomService.setShouting(true);

					item.DuiJiang = true;
					uni.showToast({
						title: '对讲已开启',
						icon: 'success'
					});

				} catch (error) {
					console.error('开启对讲失败:', error);

					// 错误处理（确保清理资源）
					if (item.connectionId) {
						voiceIntercomService.stopVoiceIntercom(item.connectionId);
						item.connectionId = null;
					}
					item.DuiJiang = false;

					// 显示错误提示
					let errorMsg = error.message;
					if (error.message.includes('NotAllowedError')) {
						errorMsg = '请允许使用麦克风权限';
					} else if (error.message.includes('NotFoundError')) {
						errorMsg = '未找到音频输入设备';
					}

					uni.showModal({
						title: '开启对讲失败',
						content: errorMsg,
						showCancel: false
					});
				} finally {
					uni.hideLoading();
				}
			},
			// 把设备添加到轮巡
			queDingTianJiaLunXun() {
				if (!this.planListItem1) {
					return ElMessage.error(`请选择轮巡计划`)
				}
				if (!this.chuangKou) {
					return ElMessage.error(`请选择窗口`)
				}
				if (!this.pollStayTime) {
					return ElMessage.error(`请输入秒`)
				}
				if (this.pollStayTime < 20) {
					return ElMessage.error(`停留时间不能小于20秒`)
				}
				this.http('/v1/polling/plan/detail', {
					id: this.planListItem1
				}, 'GET').then(res => {
					let windowSerialChannels = res.data.windowSerialChannels
					lkrequest(
							`preset/devices/${this.tongDaoItem.device_code}/channels/${this.tongDaoItem.id}/queryPresetList`, {},
							'post', 'queryPresetList')
						.then(res1 => {
							let arr = []
							res1.data.forEach(item1 => {
								arr.push({
									label: item1.presetName,
									value: item1.presetId
								})
							})
							windowSerialChannels[this.chuangKou].push({
								channelId: this.tongDaoItem.id,
								channelName: this.tongDaoItem.name,
								channelStayTime: res.data.pollStayTime,
								preparePointId: '',
								preparePointName: '',
								streamType: 1,
								channelFacadeType: this.tongDaoItem.camera_type,
								yuZhiDianList: arr,
								deviceCode: this.tongDaoItem.device_code
							})

							this.http('/v1/polling/plan/update', {
								id: res.data.id,
								pollPlanName: res.data.pollPlanName,
								pollWindowNum: res.data.pollWindowNum,
								pollStayTime: res.data.pollStayTime,
								pollDesc: res.data.pollDesc,
								windowSerialChannels: windowSerialChannels
							}, 'POST').then(res2 => {
								if (this.planInfo.id && this.planInfo.id == this.planListItem1) {
									this.stop()
									let info = {}
									this.planList.forEach(item => {
										if (item.value == this.planListItem) {
											info = item.item
										}
									})
									this.http('/v1/polling/plan/detail', {
										id: info.id
									}).then(res => {
										for (const key in res.data.windowSerialChannels) {
											if (res.data.windowSerialChannels.hasOwnProperty(
													key)) { // 过滤掉原型链上的属性
												this.lunXunShiPing(key, res.data
													.windowSerialChannels[key])
											}
										}
									})
									this.itemIndex = 0
									this.screenSetList.forEach(item => {
										if (info.pollWindowNum == item.chuangKou) {
											this.splitScreenStatus = item.sta
										}
									})
								}
								ElMessage({
									message: '添加成功！',
									type: 'success',
									plain: true,
								})
								this.turningFalg = false
							})
						})
				})
			},
			suoDingFn() {
				this.suoDingFalg = true
				setTimeout(() => {
					this.suoDingFalg = false
				}, 3000)
			}
		}
	}
</script>

<style scoped>
	page {
		background: #2c2c2c;
	}

	/deep/.el-slider__button-wrapper {
		z-index: 5;
	}

	/deep/ .el-tree-node__content:hover {
		background: #1e1e1e;
	}

	/deep/.el-tree-node:focus>.el-tree-node__content {
		background: #1e1e1e;
	}

	/deep/ .el-tree-node__content {
		height: 35px;
	}

	/deep/ .el-select__wrapper {
		background: none;
		box-shadow: none;
	}

	.laingdu .flex1 {
		height: 5px;
		border-left: 2px solid #5c5c5c;


		/* 为视频定位做准备 */
	}
	
	.hover-img:hover{
		opacity: 0.5;
	}

	.flex1 {
		min-height: 0;
		/* 关键！防止弹性项被内容撑开 */
		position: relative;
	}

	.hgd {
		border: 5px solid #212121;
	}

	.active {
		color: #fff;
	}

	.bgfff {
		background: #fff;
	}

	/* 覆盖默认样式 */
	.custom-select /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-select /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
	}

	.zhuaTuselect /deep/ .uni-select {
		background: #fff;
		border-radius: 6px;
	}

	.el-slider {
		--el-slider-main-bg-color: #165FFF;
	}
</style>

<style scoped>
	/*flex*/
	.u-f,
	.u-f-item,
	.u-f-justify,
	.u-f-right,
	.u-f-bottom,
	.u-f-end,
	.u-f-jsb {
		display: flex;
	}

	.u-f-bottom {
		align-items: flex-end;

	}

	.u-f-item,
	.u-f-justify,
	.u-f-right {
		align-items: center;
	}

	.u-f-justify {
		justify-content: center;
	}

	.u-f-right {
		justify-content: flex-end;
	}

	.u-f-around {
		justify-content: space-around;
	}

	.u-f-jsb {
		justify-content: space-between;
	}

	.u-f-end {
		justify-content: flex-end;
	}

	.u-f-column {
		flex-direction: column;
	}

	.u-f-wrap {
		flex-wrap: wrap;
	}



	.cursor {
		cursor: pointer;
	}

	.singleLine {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.multipleLines {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
	}
</style>

<style scoped lang="scss">
	.navTop {
		padding: 0 24px 0 32px;
		background-color: #2C2C2C;
		border-bottom: 1px solid #383838;
		min-height: 35px;
	}

	.tab {
		width: 411px;
		min-height: 42px;

		.item {
			margin: 0 24px;
			position: relative;

			.heng {
				position: absolute;
				width: 33px;
				height: 3px;
				background: #ffffff;
				border-radius: 15px;
				bottom: -10px;
			}
		}
	}

	.conLeft {
		overflow: hidden;
		width: 0;
		transition: all 0.3s;
		background-color: #2C2C2C;
		height: 100%;

		.leftTop {
			padding-left: 24px;
			margin-bottom: 24px;

			.LanSeBeiJing {
				background: #165fff;
				color: #fff;
			}

			input {
				color: #fff;
			}

			.wh120-60 {
				width: 80px
			}

			.input {
				background: #1e1e1e;
				width: 190px;
				height: 30px;
				border-radius: 4px;
				position: relative;

				input {
					width: 190px;
					height: 30px;
					font-size: 14px;
					padding-left: 10px;
					border-radius: 4px;
				}

				.icon1 {
					position: absolute;
					right: 10px;
					width: 25px;
				}
			}
		}

		.leftList {
			overflow: scroll;
			height: 87%;
			position: relative;

			.sanDian {
				position: absolute;
				right: 10px;
				top: 10px;
				z-index: 9;

				.dianBox {
					width: 40px;
					height: 16px;
					border: none;

					view {
						width: 4px;
						height: 4px;
						background: #ffffff;
						margin-right: 4px;
					}
				}

			}
		}

		.leftList::-webkit-scrollbar {
			display: none;
			/* Chrome 和 Safari 隐藏滚动条 */
		}

		.shouchangHang {
			padding-left: 24px;

			.hangLeft {
				.icon {
					width: 24px;
				}

				.text {
					font-size: 14px;
					font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ffffff;
					margin-left: 10px;
				}
			}

			.caozuo {
				.icon {
					width: 24px;
					margin-right: 5px;
				}

				.text {
					font-size: 14px;
					font-family: Microsoft YaHei, Microsoft YaHei-400;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}

		.staDian {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #00E47C;
			margin-right: 10px;
		}

		.staDian1 {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #FF5964;
			margin-right: 10px;
		}

		.labelText {
			margin-left: 5px;

			.text {
				margin-left: 20px;
			}

			.input {
				width: 313px;
				height: 29px;
				border: 1px solid #165fff;
				border-radius: 2px;
				color: #fff;
			}
		}

		.shouchangList::-webkit-scrollbar {
			display: none;
			/* Chrome 和 Safari 隐藏滚动条 */
		}

		.shouchangList {
			padding-top: 10px;
			width: 100%;
			overflow: scroll;
			height: 80%;

			.item {
				width: 100%;

				.icon {
					width: 24px;
					margin-right: 5px;
					transform: rotate(-90deg);
				}

				.icon1 {
					transform: rotate(0deg);
				}

				.text {
					font-size: 14px;
					font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ffffff;
					width: 313px;
				}

				.jiedian {
					height: 42px;
					background: #1e1e1e;
					position: relative;
					left: -44px;

					.shu {
						width: 4px;
						height: 42px;
						background: #165fff;
					}

					.yuan {
						margin-left: 50px;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background-color: #00E47C;
					}

					.icon {
						width: 24px;
						margin: 0 10px;
					}

					.text {
						font-size: 14px;
						font-family: Source Han Sans CN, Source Han Sans CN-400;
						font-weight: 400;
						text-align: LEFT;
						color: #ffffff;
					}

					.dian {
						margin-right: 14px;
						position: absolute;
						height: 42px;
						right: 0;

						.xiaodian {
							width: 5px;
							height: 5px;
							border-radius: 50%;
							background-color: #fff;
							margin-right: 3px;
						}

						.xuanXiang {
							position: absolute;
							width: 108px;
							height: 48px;
							background: #1e1e1e;
							border: 1px solid #383838;
							border-radius: 6px;
							box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
							left: -75px;
							top: 40px;

							.item1 {
								width: 106px;
								height: 36px;

								.itmeIocn {
									width: 16px;
									margin: 0 5px;
								}

								.itemName {}
							}

							.item:hover {
								background: #165fff;
							}

						}
					}
				}

				.input {
					width: 313px;
					height: 29px;
					border: 1px solid #165fff;
					border-radius: 2px;
					color: #fff;
				}
			}
		}

		.leftBottom {
			width: 411px;
			height: 352px;
			background-color: #3f3f3f;

			.caoZuo {
				height: 52px;
				width: 100%;
				border-bottom: 1px solid #5C5C5C;

				.left {
					.tabItem {
						font-size: 14px;
						font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
						font-weight: 400;
						text-align: LEFT;
						color: #9f9f9f;
						margin-left: 14px;
						position: relative;
						width: 56px;
						text-align: center;

						view {
							width: 48px;
							height: 3px;
							background: #ffffff;
							border-radius: 4px;
							position: absolute;
							bottom: -20px;
						}
					}

					.tabItem1 {
						color: #fff;
					}
				}

				.right {
					width: 70px;
					height: 30px;
					background-color: #242424;
					margin-right: 14px;
					color: #fff;
					border-radius: 6px;
					position: relative;

					.icon {
						width: 24px;
					}

					.text {
						font-size: 14px;
					}

					.suoBox {
						position: absolute;
						bottom: -180px;
						width: 286px;
						height: 151px;
						background: #ffffff;
						border-radius: 8px;
						left: -200px;
						z-index: 99;

						.wenzi {
							width: 199px;
							height: 48px;
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #131313;
							line-height: 24px;
							margin-bottom: 24px;
						}

						.quxiao {
							width: 76px;
							height: 32px;
							border: 1px solid #ced4db;
							border-radius: 2px;
							font-size: 14px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;
							text-align: LEFT;
							color: #2f3133;
						}

						.quding {
							width: 76px;
							height: 32px;
							background: #165fff;
							border-radius: 2px;
							margin-left: 24px;
						}
					}
				}
			}

			.addYuzhidian {
				width: 120px;
				height: 35px;
				position: absolute;
				right: 20px;
				top: 15px;
				background-color: #0E4CFD;
				color: #fff;
				border-radius: 10px;
			}

			.suoName {
				position: absolute;
				top: 34px;
				height: 48px;
				width: 100%;
				border-radius: 6px;
				z-index: 99;

				view {
					padding: 0 24px;
					height: 48px;
					background: rgba(0, 0, 0, 0.80);
					border-radius: 6px;
					line-height: 48px;
					z-index: 9;
				}
			}

			.cruise {
				width: 383px;
				margin: 0 auto;
				padding: 12px 0;

				.addYuzhidian {
					width: 120px;
					height: 35px;
					position: relative;
					right: 0;
					top: 0;
					background-color: #0E4CFD;
					color: #fff;
					border-radius: 10px;
					margin-bottom: 10px;
				}

				.ksxh {
					background: #585858;
					border-radius: 6px;
					width: 98px;
					height: 32px;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
					color: #fff;
					position: relative;

					.tis {
						position: absolute;
						width: 235px;
						height: 130px;
						background: #ffffff;
						border-radius: 8px;
						top: 40px;
						left: -135px;
						z-index: 9;

						.text {
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #131313;
							margin-bottom: 20px;
						}

						.quxiao {
							font-size: 14px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;
							text-align: LEFT;
							color: #2f3133;
							width: 76px;
							height: 32px;
							border: 1px solid #ced4db;
							border-radius: 2px;
							margin-right: 20px;
						}

						.quereng {
							font-size: 14px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;
							text-align: LEFT;
							color: #ffffff;
							width: 76px;
							height: 32px;
							background: #165fff;
							border-radius: 2px;
						}
					}
				}
			}

			.VideoParameters {
				.item {
					margin-bottom: 10px;

					.left {
						font-size: 14px;
						font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
						font-weight: 400;
						text-align: right;
						color: #fff;
						width: 50px;
					}

					.right {
						width: 260px;
						margin-left: 30px;
					}
				}
			}

			.yunkongzhi {
				margin-top: 70px;

				.kongzhitai {
					width: 142px;

					.kongzhiImg {
						width: 142px;
						position: relative;

						.circle {
							position: absolute;
							width: 124px;
							height: 124px;
							border-radius: 50%;
							background: #ccc;
							overflow: hidden;

							.sector {
								position: absolute;
								width: 100%;
								height: 100%;
								clip-path: polygon(50% 50%, 100% 0, 100% 100%);
								transform: rotate(calc(45deg * var(--i)));
								background-color: #585858;
							}

							.sector1 {
								// background-color: #454545;
								z-index: 9;
							}
						}

						.yuan {
							width: 50px;
							height: 50px;
							border-radius: 50%;
							position: absolute;
							background-color: #303030;
							z-index: 9;
						}

						.yuan1 {
							width: 40px;
							height: 40px;
							border-radius: 50%;
							position: absolute;
							background-color: #4A4A4A;
							z-index: 9;
						}

						.yuan2 {
							width: 35px;
							height: 35px;
							border-radius: 50%;
							position: absolute;
							background-color: #303030;
							z-index: 9;
						}

						.jiantou1 {
							height: 124px;
							position: absolute;

							image {
								position: absolute;
								top: 5px;
							}
						}

						.jiantou2 {
							height: 124px;
							position: absolute;

							image {
								position: absolute;
								top: 95px;
								z-index: 9;
								transform: rotate(calc(180deg));
							}
						}
					}


				}

				.jiajiang {
					margin-left: 40px;

					.item {
						margin-bottom: 20px;

						.text {
							color: #fff;
						}

						.quan {
							width: 70px;
							margin-left: 10px;
						}

					}


				}

			}

			.buchang {
				margin: 20px auto 0;
				width: 100%;

				.text {
					color: #fff;
					margin: 0 20px;
				}
			}

			.yuzhidian {
				padding: 14px 0;

				.zhuandao {
					width: 78px;
					height: 32px;
					background: #585858;
					border-radius: 6px;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
					margin-left: 24px;

					.text {
						color: #fff;
						margin-left: 5px;
					}
				}

				.set {
					margin-top: 14px;

					.text {
						color: #fff;
						margin-left: 5px;
					}
				}

				.box {
					width: 180px;
					height: 32px;
					background: #5c5c5c;
					border-radius: 6px;
					margin-left: 14px;

					.text {
						font-size: 14px;
						margin-left: 14px;
					}
				}



			}

			.paixu {
				margin-top: 10px;

				.titleItem {
					width: 380px;
					height: 40px;
					background: #5b5b5b;
					font-size: 14px;
					font-family: Microsoft YaHei, Microsoft YaHei-400;
					font-weight: 400;
					text-align: CENTER;
					color: #ffffff;
					margin-bottom: 3px;

					.item1 {
						width: 30px;
						text-align: center;
						margin-left: 10px;
						margin-right: 30px;
					}

					.item2 {
						width: 180px;
						margin-right: 10px;
						text-align: left;
					}

					.item3 {
						width: 120px;

						.bianji {
							.text {
								font-size: 14px;
								font-family: Source Han Sans CN, Source Han Sans CN-400;
								font-weight: 400;
								text-align: CENTER;
								color: #43c4ff;
								margin-left: 5px;
								white-space: nowrap;
							}
						}

						.shanchu {
							margin-left: 10px;

							.text {
								font-size: 14px;
								font-family: Source Han Sans CN, Source Han Sans CN-400;
								font-weight: 400;
								text-align: CENTER;
								color: #D46262;
								margin-left: 5px;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

	}

	.conLeft1 {
		min-width: 411px;
	}

	.customNode1 {
		background: #1e1e1e;
		width: 100%;
		position: absolute;
		height: 42px;
		left: 0;

		.xuanZhong {
			width: 4px;
			height: 42px;
			background: #165fff;
		}

		.dian {
			margin-right: 14px;
			position: relative;
			z-index: 9;
			width: 30px;
			height: 50px;

			.xiaodian {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #fff;
				margin-left: 3px;
			}

			.xuanXiang {
				position: absolute;
				width: 108px;
				height: 84px;
				background: #1e1e1e;
				border: 1px solid #383838;
				border-radius: 6px;
				box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
				left: -75px;
				top: 40px;

				.item {
					width: 106px;
					height: 36px;

					.itmeIocn {
						width: 16px;
						margin: 0 5px;
					}

					.itemName {}
				}

				.item:hover {
					background: #165fff;
				}

			}
		}
	}

	.custom-tree-node::-webkit-scrollbar {
		display: none;
		/* Chrome 和 Safari 隐藏滚动条 */
	}

	.custom-tree-node {
		min-width: 350px;
		position: relative;

		.dian {
			margin-right: 14px;
			height: 42px;
			position: absolute;
			right: 0;

			.xiaodian {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #fff;
				margin-right: 3px;
			}

			.xuanXiang {
				position: absolute;
				width: 70px;
				height: 34px;
				background: #1e1e1e;
				border: 1px solid #383838;
				border-radius: 6px;
				box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
				left: -75px;
				top: 3px;


				.item {
					height: 35px;

					text {
						padding-left: 20px;
					}
				}

				.item:hover {
					background: #165fff;
				}

			}
		}
	}

	.jiazaiIcon {
		animation: spin 1s linear infinite;
		/* 动画名称、持续时间、速度曲线、重复次数 */
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
			/* 起始角度 */
		}

		to {
			transform: rotate(360deg);
			/* 结束角度 */
		}
	}

	.lunxun {
		padding: 10px 8px;
		background: #585858;
		border-radius: 6px;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
		margin-left: 24px;
	}

	.anNiu {
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 52px;
		background: rgba(0, 0, 0, 0.70);

		.item {
			width: 78px;
			height: 52px;

			.anNiuText {
				font-size: 12px;
				margin-left: 4px;
			}
		}
	}

	.tis {
		width: 267px;
		height: 56px;
		background: #ffffff;
		border-radius: 8px;

		.tisText {
			color: #131313;
			margin-left: 5px;
		}
	}

	.ces {
		width: 36px;
		position: relative;
		transition: all 0.3s;
		opacity: 1;

		image {
			transform: rotate(180deg);
			left: -10px;
		}
	}



	.hegtih100 {
		height: 100vh;
	}


	.addCollection {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 9;

		.box {
			width: 494px;
			height: 488px;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);

			.collTop {
				height: 60px;
				border-bottom: 1px solid #EBECEF;

				.left {
					.shu {
						width: 3px;
						height: 15px;
						background: #165fff;
						border-radius: 20px;
						margin-left: 30px;
						margin-right: 14px;
					}

					.text {
						font-size: 18px;
						font-family: Microsoft YaHei, Microsoft YaHei-700;
						font-weight: 700;
						text-align: LEFT;
						color: #333333;
						line-height: 24px;
					}
				}

				.icon {
					width: 24px;
					margin-right: 14px;
				}
			}

			.collceng {
				padding: 18px 24px;

				.caoz {
					.left {
						.icon {
							width: 24px;
							margin-right: 8px;
						}

						.text {
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #333333;
						}
					}

					.right {
						width: 87px;
						height: 32px;
						background: #165fff;
						border-radius: 2px;
						font-size: 14px;
						font-family: Microsoft YaHei, Microsoft YaHei-400;
						font-weight: 400;
						text-align: LEFT;
						color: #ffffff;
					}


				}

				.colllist {
					margin-top: 24px;
					height: 300px;
					overflow: scroll;

					::v-deep .el-tree-node__content:hover {
						background: #eef1f5;
					}

					::v-deep.el-tree-node:focus>.el-tree-node__content {
						background: #eef1f5;
					}

					.labelText1 {
						background: #eef1f5;
					}

					.item {
						width: 446px;
						height: 42px;
						background: #eef1f5;
						border-radius: 4px;

						.iconImg {
							width: 16px;
							margin: 0 5px;
						}

						.iconImg1 {
							width: 24px;
							margin-right: 5px;
						}

						.text {
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #18191a;
						}
					}

					.input {
						width: 250px;
						height: 29px;
						border: 1px solid #165fff;
						border-radius: 2px;
						color: #000;
					}
				}

			}

			.collceng1 {
				.item {
					margin: 10px 0;

					.text {
						width: 80px;
						text-align: right;
					}
				}
			}



			.collbott {
				height: 60px;
				border-top: 1px solid #EBECEF;

				.quxiao {
					width: 76px;
					height: 32px;
					border: 1px solid #ced4db;
					border-radius: 2px;
					margin-right: 30px;
					border-radius: 4px;
				}

				.queding {
					width: 76px;
					height: 32px;
					background: #165fff;
					border-radius: 2px;
					margin-right: 30px;
					color: #ffffff;
					border-radius: 4px;
				}
			}
		}

		.zhuaTu {
			padding: 20px;

			.zhongYao {
				.left {
					width: 408px;
					height: 268px;
					position: relative;

					.zuo {
						width: 32px;
						position: absolute;
						top: 120px;
						left: 20px;
					}

					.you {
						width: 32px;
						position: absolute;
						top: 120px;
						right: 20px;
					}

					.zuoBiao {
						position: absolute;
						bottom: 20px;

						view {
							width: 8px;
							height: 8px;
							background: rgba(0, 0, 0, 0.30);
							border-radius: 50%;
						}
					}
				}

				.right {
					margin-left: 24px;

					.item {
						margin-bottom: 10px;
					}
				}
			}

		}


	}

	.zhuaTuTacnChuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 9;

		.box {
			width: 494px;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);

			.collTop {
				height: 60px;
				border-bottom: 1px solid #EBECEF;

				.left {
					.shu {
						width: 3px;
						height: 15px;
						background: #165fff;
						border-radius: 20px;
						margin-left: 30px;
						margin-right: 14px;
					}

					.text {
						font-size: 18px;
						font-family: Microsoft YaHei, Microsoft YaHei-700;
						font-weight: 700;
						text-align: LEFT;
						color: #333333;
						line-height: 24px;
					}
				}

				.icon {
					width: 24px;
					margin-right: 14px;
				}
			}

			.collbott {
				height: 60px;
				border-top: 1px solid #EBECEF;

				.quxiao {
					width: 76px;
					height: 32px;
					border: 1px solid #ced4db;
					border-radius: 2px;
					margin-right: 30px;
					border-radius: 4px;
				}

				.queding {
					width: 76px;
					height: 32px;
					background: #165fff;
					border-radius: 2px;
					margin-right: 30px;
					color: #ffffff;
					border-radius: 4px;
				}
			}
		}

		.zhuaTu {
			padding: 20px;

			.zhongYao {
				.left {
					width: 408px;
					height: 268px;
					position: relative;

					.zuo {
						width: 32px;
						position: absolute;
						top: 120px;
						left: 20px;
					}

					.you {
						width: 32px;
						position: absolute;
						top: 120px;
						right: 20px;
					}

					.zuoBiao {
						position: absolute;
						bottom: 30px;

						.item {
							width: 8px;
							height: 8px;
							background: rgba(0, 0, 0, 0.30);
							border-radius: 50%;

							view {
								width: 6px;
								height: 6px;
								background: #ffffff;
								border-radius: 50%;
							}
						}
					}
				}

				.right {
					margin-left: 24px;

					.item {
						margin-bottom: 10px;
					}
				}
			}

		}
	}

	.collceng2 {
		padding: 24px 30px;

		.list {
			margin-top: 30px;

			.item {
				background: #f5f7fa;
				height: 48px;
			}

			.itembai {
				background: #fff;
				font-size: 14px;
				border-bottom: 1px solid #EBEEF5;

				.item8 {
					view {
						width: 47px;
						height: 20px;
						background: rgba(240, 88, 98, 0.10);
						border: 1px solid #f05862;
						border-radius: 2px;
						font-size: 12px;
						font-family: Source Han Sans CN, Source Han Sans CN-400;
						font-weight: 400;
						text-align: LEFT;
						color: #f05862;
					}

				}

				.item9 {
					font-size: 14px;
					font-family: Source Han Sans CN, Source Han Sans CN-400;
					font-weight: 400;
					text-align: CENTER;
					color: #43c4ff;
				}

				.item6 {
					.dengji {
						width: 60px;
						height: 20px;
						background: rgba(255, 71, 62, 0.10);
						border: 1px solid #f05862;
						border-radius: 2px;

						.icon {
							width: 13px;
							margin-right: 5px;
						}

						.text {
							font-size: 12px;
							font-family: PingFang SC, PingFang SC-400;
							font-weight: 400;
							text-align: LEFT;
							color: #f05862;
						}
					}


				}
			}

			.item1 {
				width: 46px;
			}

			.item2 {
				width: 186px;
			}

			.item3 {
				width: 186px;

			}

			.item4 {
				width: 186px;

			}

			.item5 {
				width: 186px;

			}

			.item6 {
				width: 106px;

			}

			.item7 {
				width: 89px;

			}

			.item8 {
				width: 106px;

			}

			.item9 {
				width: 103px;

			}

		}
	}

	.collceng3 {
		padding: 24px 30px;

		.yzd {
			width: 238px;
			height: 295px;
			border: 1px solid #e6ebf0;
			border-radius: 8px;
			margin-top: 20px;

			.top {
				width: 238px;
				height: 32px;
				background: #f8f9fa;

				text {
					padding-left: 16px;
					font-weight: 700;
					text-align: LEFT;
					color: #333333;
				}
			}

			.duoxuan {
				padding-left: 14px
			}
		}

		.yixuan {
			width: 368px;
			height: 295px;
			border: 1px solid #e6ebf0;
			border-radius: 8px;
			margin-top: 20px;
			margin-left: 10px;

			.top {
				width: 238px;
				height: 32px;
				background: #f8f9fa;

				text {
					padding-left: 16px;
					font-weight: 700;
					text-align: LEFT;
					color: #333333;
				}
			}

			.duoxuan {
				padding-left: 14px
			}

			.Ltitle {
				width: 328px;
				height: 32px;
				background: #f3f3f3;
				border-radius: 2px;
				font-size: 14px;
				margin: 10px;

				.item1 {
					width: 130px;
					text-align: center;
				}

				.item2 {
					width: 98px;
					text-align: center;
				}

				.item3 {
					width: 50px;

					image {
						width: 16px;
					}
				}
			}

			.Ltitle1 {
				background: #fff;
				margin: 0;
				margin-bottom: 3px;
			}
		}
	}

	.rightBox {
		margin: 12px;

		.videoList {
			margin-bottom: 12px;
			background-color: #2C2C2C;
			overflow: hidden;
			padding: 2px 0;
			min-height: 0;
			/* 关键！防止弹性项被内容撑开 */
			position: relative;

			/* 为视频定位做准备 */
			.xuanZhongXiaoGuo {
				border: 2px solid #00E47C;
				box-sizing: border-box;
			}
		}
	}

	.quanPing {
		margin: 0;

		.videoList {
			margin: 0;
		}
	}


	.LayoutPop {
		position: fixed;
		width: 536px;
		height: 541px;
		background: #1e1e1e;
		border: 1px solid #383838;
		border-radius: 6px;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
		bottom: 100px;
		right: 100px;
		z-index: 999;

		.title {
			font-size: 14px;
			font-family: Microsoft YaHei, Microsoft YaHei-400;
			font-weight: 400;
			text-align: LEFT;
			color: #ffffff;
			margin: 24px;
		}

		.list {

			.item {
				width: 68px;
				height: 68px;
				border-radius: 6px;
				margin: 0 10px;
				margin-bottom: 15px;

				.icon {
					width: 46px;
				}

				.text {
					font-size: 14px;
					font-family: Source Han Sans CN, Source Han Sans CN-500;
					font-weight: 500;
					text-align: LEFT;
					color: #5c5c5c;
				}
			}

			.item1 {
				background: #2c2c2c;

				.text {
					color: #fff;
				}
			}
		}
	}

	.dibucaozuo {
		width: 100%;
		min-height: 72px;

		view {
			white-space: nowrap;
		}
	}

	.mar10 {
		margin-right: 10px;
	}

	.mab10 {
		margin-bottom: 10px;
	}
</style>